멀티 도트 차트 d3 범례가 작동하지 않습니다.

Question

전 d3 초보자입니다. 나는 멀티 넛 차트를 만들려고했다. 그러나 나는 전설 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