Легенда в диаграмме окружности D3

Question

Мне нужно создать легенду для диаграммы пакетов пузырьков/кругов. Я показываю значения внутри круга. Мне нужны имена в качестве легенды. Для экземпляра в приведенных ниже данных, если значение равно 60, мне нужно, чтобы это имя «Petrol» в легенде. Как я могу это достичь?

Отрывок:

var diameter = 200, 
    format = d3.format(",d"), 
    color = ["#7b6888", "#ccc", "#aaa", "#6b486b"]; 

var bubble = d3.layout.pack().size([diameter, diameter]); 

var svg = d3.select("#bubbleCharts").append("svg") 
    .attr("width", diameter + 10) 
    .attr("height", diameter) 
    .attr("class", "bubble"); 

d3.json("flare.json", function(error, root) { 
    var node = svg.selectAll(".node") 
     .data(bubble.nodes(classes(root)) 
     .filter(function(d) { return !d.children; })) 
     .enter().append("g") 
     .attr("class", "node") 
     .attr("transform", function(d) { return "translate(" + d.x + 20 + "," + d.y + ")"; }); 

    node.append("circle").attr("r", function(d) { return d.r+ 7; }) 
     .style("fill", function(d,i) { return color[i];}); 

    node.append("text").attr("dy", ".3em").style("text-anchor", "middle") 
     .text(function(d) { return d.value+"%"; }); 
}); 

function classes(root) { 
    var classes = []; 

    function recurse(name, node) { 
     if (node.children) 
      node.children.forEach(function(child){ 
        recurse(node.name, child); 
      }); 
     else 
      classes.push({packageName: name, value: node.value}); 
    } 

    recurse(null, root); 
    return {children: classes}; 
} 

var legend = d3.select("#bubbleChart").append("svg") 
    .selectAll("g").data(node.children).enter().append("g") 
    .attr("class","legend") 
    .attr("width", radius) 
    .attr("height", radius * 2) 
    .attr("transform", function(d, i) {return "translate(" + i *10 + "0" + ")"; }); 


legend.append("rect").attr("width", 18).attr("height", 10) 
    .style("fill", function(d, i) { return color[i];}); 

legend.append("text").attr("x", 24).attr("y", 5).attr("dy", ".35em") 
    .text(function(d) { return d; }); 

Мои данные:

{ 
    "name": "Spending Activity", 
    "children": [ 
    {"name": "Petrol", "value": 10}, 
    {"name": "Travel", "value": 60}, 
    {"name": "Medical", "value": 25}, 
    {"name": "Shopping", "value": 5} 
    ] 
    } 

Как бы я принимать значения из JSON и создать легенду? Благодарю.

Answer 1

Вы можете просто перебирать набора данных и добавить эти значения:

legend.selectAll("circle").data(data.children) 
     .enter() 
     .append("circle") 
     .attr("cy", function(d,i) { return (i+1) * 10; }) 
     .attr("r", function(d) { return d.r+ 7; }) 
     .style("fill", function(d,i) { 
     return color[i]; 
     }); 
legend.selectAll("text").data(data.children) 
     .enter() 
     .append("text") 
     .attr("transform", function(d,i) { 
     return "translate(10," + ((i+1) * 10) + ")"; 
     });