gpt4 book ai didi

javascript - 在 d3 中使用气泡图时出现问题

转载 作者:行者123 更新时间:2023-12-02 15:17:22 24 4
gpt4 key购买 nike

我正在开发和使用的东西需要一个气泡图 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com