Legend in D3 circle pack diagram

可紊 提交于 2019-12-11 13:55:34

问题


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.


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


来源:https://stackoverflow.com/questions/20366441/legend-in-d3-circle-pack-diagram

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!