gpt4 book ai didi

javascript - D3 多个饼图标签

转载 作者:行者123 更新时间:2023-11-30 05:34:57 26 4
gpt4 key购买 nike

我对使用非常大的数据集并尝试创建非常大的饼图数组的 D3 比较陌生。但是我不知道如何在每个饼图的最顶部放置小标题。

我正在使用的数据目前是这样的 csv 格式,水果将是我想要的饼图标签

[apple,90,36,2]
[pear,36,36,3]
[grape,19,13,0]

我已将我的代码粘贴到下面,其中包含适用于它的数据。此外,我最终希望能够放大数据并从这样的缩小功能中查看它:

http://mbostock.github.io/d3/talk/20111116/pack-hierarchy.html

enter image description here

如果有人想有效地传达这一点,我们将不胜感激。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Multiple Pie Charts</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.5"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.4.5"></script>
<style type="text/css">


body {
text-align: center;
}

</style>
</head>
<body>
<script type="text/javascript">
var data = [
[90,36,2],
[36,36,3],
[19,13,0],
]
var m = 10,
r = 100,
z = d3.scale.category20c();
var svg = d3.select("body").selectAll("svg")
.data(data)
.enter().append("svg:svg")
.attr("width", (r + m) * 2)
.attr("height", (r + m) * 2)
.append("svg:g")
.attr("transform", "translate(" + (r + m) + "," + (r + m) + ")");
svg.selectAll("path")
.data(d3.layout.pie())
.enter().append("svg:path")
.attr("d", d3.svg.arc()
.innerRadius(r / 2)
.outerRadius(r))
.style("fill", function(d, i) { return z(i); });

</script>
</body>
</html>

最佳答案

你可以使用 dc.js,它简化了 d3 图表的制作并保留了灵 active 。在该项目的主页上,他们有一个指向带注释的源代码的链接,因此您可以了解如何使用它。

如果你有一个大数据集,我会使用类似的东西,因为它使用交叉过滤器将你的数据元素减少到只需要显示的元素,从而获得更好的性能。

抱歉,我没有直接回答您的标题问题,而是建议了一种不同的方法,但我从来没有这样做过,因为我使用了 dc.js,这让这一切变得更加简单。

关于javascript - D3 多个饼图标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24440185/

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