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中，函数的第二个参数是元素的索引。因此，您可以使用此索引直接从数据数组中获取任何属性。

例如

data [0] - ＆gt; {"Class":"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; 
       });

D3.js给带有内环的圆环图赋予传奇

1 个答案: