D3.js为带内环的圆环图添加一个图例

D3.js Giving a legend to a donut chart with inner rings

本文关键字：一个 添加 js 内环 圆环图 D3      更新时间：2023-09-26

我正在尝试将一个标记正确的图例添加到带有多个环的圆环图中。我在这里有关于plunker的更新代码：甜甜圈图

这是我用来添加图例的代码：

 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类。。

请协助

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

例如。

数据[0]->{"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; 
       });
相关文章：