Legend in D3 circle pack diagram

Question

I need to create a legend for the bubble/circle pack chart. I'm displaying the values inside the circle. I need the names as the legend. For an instance, in the below provided data, if the value is 60, i need that name "Petrol" in the legend. How could i achieve it?

Snippet:

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

My data:

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

How would i take the values from json and create a legend? Thanks.

Answer 1

You can simply iterate through your data set and add those values:

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