Multidonut chart d3 legendds not working

Question

我是一名d3新手。我正在嘗試創建一個multidonut圖表。 但我沒有得到傳說columns.I增加了這裏

http://jsfiddle.net/YsvT8/

我嘗試添加該代碼

var legend = d3.select("body").append("svg") 
     .attr("class", "legend") 
     .attr("width", radius * 2) 
     .attr("height", radius * 2) 
    .selectAll("g") 
     .data(color.domain().slice().reverse()) 
    .enter().append("g") 
     .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 

    legend.append("rect") 
     .attr("width", 18) 
     .attr("height", 18) 
     .style("fill", color); 

    legend.append("text") 
     .attr("x", 24) 
     .attr("y", 9) 
     .attr("dy", ".35em") 
     .text(function(d) { return d; }); 

，但我的頁面沒有加載我的代碼。 我無法弄清楚我需要做什麼改變來獲得頁面左側的圖例。

Answer 1

試試看看這個代碼。它會給你所需的輸出。

var legend = d3.select("body").append("svg") 
     .attr("class", "legend") 
     .attr("width", radius * 2) 
     .attr("height", radius * 2) 
     .selectAll("g") 
     .data(pairs) //Changed this line from your code 
     .enter().append("g") 
     .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 

     legend.append("rect") 
      .attr("width", 18) 
      .attr("height", 18) 
      .style("fill", color); 

     legend.append("text") 
      .attr("x", 24) 
      .attr("y", 9) 
      .attr("dy", ".35em") 
      .text(function(d) { return d.key; });//Changed this line from your code