图例在D3圆包图中 [英] Legend in D3 circle pack diagram

问题描述

我需要为气泡/圆形图表创建图例。我在圆圈内显示值。我需要的名字作为传说。对于一个实例，在下面提供的数据中，如果值是60，我需要在图例中的名称Petrol。

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?

代码段：

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取值并创建图例？

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

推荐答案

您可以简单地迭代数据集并添加以下值：

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

这篇关于图例在D3圆包图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！