javascript - 使用 D3 为气泡图创建图例

Question

我一直在尝试学习 D3(特别是气泡图)。我在这里创建了一个非常简单的图表:

//This is making the demensions for the circles and canvas
    //The format and color is for hovering over the circles for the dialog box
    var diameter = 1500,
        format = d3.format(",d"),
        color = d3.scale.category20c();

    //This makes the canvas that the bubble chart will be made on
    var canvas = d3.select("body").append("svg")
                                  .attr("width", diameter)
                                  .attr("height", diameter)
                                  .append("g")
                                    .attr("transform", "translate(50,50)");

    //This is the size of the actual bubbles in the chart
    var pack = d3.layout.pack()
            .size([900, 900])
            .padding(85);

    //This is adding the data into the bubbles and creating their size
    d3.json("CountryData.js", function (data) {
        var nodes = pack.nodes(data);

        var node = canvas.selectAll(".node")
                    .data(nodes)
                    .enter()
                    .append("g")
                        .attr("class", "node")
                        .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });

        //This is the actual bubbles
        node.append("circle")
            .attr("r", function (d) {return d.r;})
            .style("fill", function (d, i) { return color(i); });


        //This is the text inside the bubbles
        node.append("text")
            .text(function (d) { return d.children ? "" : d.name; })
            .style("text-anchor", "middle")

        //This is the dialog box
        node.append("title")
            .text(function (d) { return d.name + ": " + format(d.value) + "" + "medals"; });


    });

我一直在尝试添加一个图例来显示“亚洲”、“北美”、“中东”等及其颜色。我得到的最接近的是显示带有颜色的框并显示颜色名称。我试图使用这个:Legend in D3 circle pack diagram作为引用。我可以附上我是如何尝试制作图例的，但我觉得这样的代码对于一篇文章来说太多了。这是我的数据:

{
"name" : "Region Olympic Medals",
"value" : 10000,
"children" : [
    {
        "name" : "Asia",
        "value" : 451,
        "children" : [
            {"name" : "Summer Gold", "value" : 114},
            {"name" : "Summer Silver", "value" : 172},
            {"name" : "Summer Bronze", "value" : 158},
            {"name" : "Winter Gold", "value" : 1},
            {"name" : "Winter Silver", "value" : 1},
            {"name" : "Winter Bronze", "value" : 2}
        ]
    },
    {
        "name" : "Australia & Oceaina",
        "value" : 26,
        "children" : [
            {"name" : "Summer Gold", "value" : 4},
            {"name" : "Summer Silver", "value" : 7},
            {"name" : "Summer Bronze", "value" : 15},
            {"name" : "Winter Gold", "value" : 0},
            {"name" : "Winter Silver", "value" : 0},
            {"name" : "Winter Bronze", "value" : 0}
        ]
    },
    {
        "name" : "Caribbean",
        "value" : 1136,
        "children" : [
            {"name" : "Summer Gold", "value" : 306},
            {"name" : "Summer Silver", "value" : 319},
            {"name" : "Summer Bronze", "value" : 381},
            {"name" : "Winter Gold", "value" : 42},
            {"name" : "Winter Silver", "value" : 41},
            {"name" : "Winter Bronze", "value" : 47}
        ]
    },
    {

            "name" : "Central America",
            "value" : 26,
            "children" : [
                {"name" : "Summer Gold", "value" : 4},
                {"name" : "Summer Silver", "value" : 3},
                {"name" : "Summer Bronze", "value" : 4},
                {"name" : "Winter Gold", "value" : 0},
                {"name" : "Winter Silver", "value" : 0},
                {"name" : "Winter Bronze", "value" : 0}
        ]
    },
    {

        "name" : "Europe",
        "value" : 7264,
        "children" : [
            {"name" : "Summer Gold", "value" : 1924},
            {"name" : "Summer Silver", "value" : 1993},
            {"name" : "Summer Bronze", "value" : 2257},
            {"name" : "Winter Gold", "value" : 362},
            {"name" : "Winter Silver", "value" : 366},
            {"name" : "Winter Bronze", "value" : 362}
        ]
    },
    {

        "name" : "Middle East",
        "value" : 2696,
        "children" : [
            {"name" : "Summer Gold", "value" : 280},
            {"name" : "Summer Silver", "value" : 331},
            {"name" : "Summer Bronze", "value" : 361},
            {"name" : "Winter Gold", "value" : 535},
            {"name" : "Winter Silver", "value" : 582},
            {"name" : "Winter Bronze", "value" : 607}
        ]
    },
    {

        "name" : "North America",
        "value" : 7,
        "children" : [
            {"name" : "Summer Gold", "value" : 4},
            {"name" : "Summer Silver", "value" : 1},
            {"name" : "Summer Bronze", "value" : 2},
            {"name" : "Winter Gold", "value" : 0},
            {"name" : "Winter Silver", "value" : 0},
            {"name" : "Winter Bronze", "value" : 0}
        ]
    },
    {

        "name" : "South America",
        "value" : 6273,
        "children" : [
            {"name" : "Summer Gold", "value" : 1220},
            {"name" : "Summer Silver", "value" : 1014},
            {"name" : "Summer Bronze", "value" : 335},
            {"name" : "Winter Gold", "value" : 1421},
            {"name" : "Winter Silver", "value" : 1193},
            {"name" : "Winter Bronze", "value" : 1090}
        ]
    },
    {

        "name" : "Sub-Saharan Africa",
        "value" : 1847,
        "children" : [
            {"name" : "Summer Gold", "value" : 485},
            {"name" : "Summer Silver", "value" : 549},
            {"name" : "Summer Bronze", "value" : 628},
            {"name" : "Winter Gold", "value" : 50},
            {"name" : "Winter Silver", "value" : 59},
            {"name" : "Winter Bronze", "value" : 76}
        ]
    }
]

Answer 1

要创建图例，您可以根据他们是否有 d.children 来过滤数据。

var legend_data = nodes.filter(function(d,i){  
    d.original_index = i;
    return d.children;
    });

请注意，我在原始数据集中保留了索引 d.original_index对于 color稍后属性。

其次，如您引用的 [示例] 所示，我们可以 enter()我们的传奇数据在一个新的<g>元素，根据需要调整 x 和 y。

var legend = canvas.append("g")
    .attr("class", "legend")
    .selectAll("g")
    .data(legend_data)
    .enter()
        .append("g")
        .attr("transform", function(d,i){
            return "translate(" + d.depth*10 + "," + i*20 + ")"; 
          })

// Draw rects, and color them by original_index
legend.append("rect")
    .attr("width", 8)
    .attr("height", 8)
    .style("fill", function(d){return color(d.original_index)});

legend.append("text")
    .attr("x", function(d,i){ return d.depth*10 +10;})
    .attr("dy", "0.50em")
    .text(function(d){return d.name;})

注意我使用了变量 d.depth调整 x 方向，在图例中显示数据层次结构。

这是一个working fiddle与您的数据。如果还有什么不清楚的地方，请告诉我。