D3.js为带有内圈的甜甜圈图赋予图例

Question

I am trying to add a properly labelled legend to a donut chart with multiple rings. I have the updated code on the plunker here : donut chart

Here is the code which I use for adding the legend:

 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; });

As you would notice on the chart that the legend is numbered from 0 to 5, but what I want is for the legend to be labelled based on the classes used to draw the chart eg Class A, B ..

Please assist

Answer 1

In d3 , the second parameter of the function is the index of the element. So you can directly get any property from the data array by using this index.

Eg.

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

So try this code.

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