我正在开发和使用的东西需要一个气泡图 http://bl.ocks.org/mbostock/4063269举个例子。我的数据将以平面格式输入，因此我不需要处理节点树并将其展平，因此我删除了该部分。
问题是，在删除它并简化其余部分之后，它似乎对数据没有做任何事情。我猜我的数据格式不正确，但我不确定。
http://tributary.io/inlet/b54cdb7104c40b1d7df3 我在运行时没有遇到任何错误，但我显然必须在这里遗漏一些东西，对吗？
最佳答案
即使您的数据是平坦的，包布局也期望 hierarchical data 。您必须为其提供至少一个根节点的子:
var json = {
"data": {
"children": [{ //<-- needs a child...
"name": "test",
"value": 55
}, {
"name": "test2",
"value": 34
}]
}
};
完整代码:
<!DOCTYPE html>
<html>
<head>
<script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
</head>
<body>
<script>
var json = {
"data": {
"children": [{
"name": "test",
"value": 55
}, {
"name": "test2",
"value": 34
}]
}
};
var diameter = 960,
format = d3.format(",d"),
color = d3.scale.category20c();
var bubble = d3.layout.pack()
.sort(null)
.size([diameter, diameter])
.padding(1.5);
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");
var node = svg.selectAll(".node")
.data(bubble.nodes(json.data))
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
node.append("title")
.text(function(d) {
return d.name + ": " + format(d.value);
});
node.append("circle")
.attr("r", function(d) {
return d.r;
})
.style("fill", function(d) {
return color(d.name);
});
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) {
return d.name;
});
</script>
</body>
</html>关于javascript - 在 d3 中使用气泡图时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34341036/