我一直在努力学习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"; });
});
我一直试图添加一个传奇，展示＆＃34;亚洲＆＃34;，＆＃34;北美＆＃34;，＆＃34;中东＆＃34;等等及其颜色。我最接近的是显示带有颜色的框并显示颜色名称。我试图使用这个：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}
]
}
]
}
答案 0 :(得分：2)
要创建图例，您可以根据是否有 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 < / em>视需要。
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。 如果有任何事情仍然不清楚，请告诉我。