javascript - D3.js 为带有内环的圆环图提供图例

Question

我正在尝试将正确标记的图例添加到具有多个环的圆环图中。我在这里有关于 plunker 的更新代码:donut chart

这是我用于添加图例的代码:

 var legend = chart1.selectAll(".legend")
     .data(color.domain().slice())//.reverse())
     .enter().append("g")
     .attr("class","legend")
     .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("rect")
    .attr("x", 190)
    .attr("y", -(margin.top) * 7 - 8)
    .attr("width", 18)
    .attr("height", 18)
    .style("fill", color);

legend.append("text")
    .attr("x", margin.right * 7)
    .attr("y", -(margin.top) * 7)
    .attr("dy", ".35em")
    .text(function(d,i) { return d; });

正如您在图表上注意到的，图例从 0 到 5 编号，但我想要的是根据用于绘制图表的类来标记图例，例如 A 类、B 类 ..

请帮忙

Answer 1

在d3中，函数的第二个参数是元素的索引。因此，您可以使用该索引直接从数据数组中获取任何属性。

例如。

数据[0] -> {"Class":"A 类","Actual_Class":"495","Predicted_Class":"495","Accuracy":"100"}

所以试试这个代码。

legend.append("text")
      .attr("x", margin.right * 7)
      .attr("y", -(margin.top) * 7)
      .attr("dy", ".35em")
      .text(function(d,i) { 
         return data[i].Class; 
       });