多圆环图 d3 图例不起作用

Question

我是 d3 新手。我试图创建一个多圆环图。但我没有得到图例列。我在这里添加了我的代码

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