如何在此 d3.js 视觉对象中用一条线连接两个弧



我在网上看到一个信息图,我想用它来作为学习d3.js的挑战。 原始信息图在这里:

http://www.shah3d.com/wp-content/uploads/2012/11/IG-WWF-Dehahs.png

我从这里开始:http://www.tips-for-excel.com/d3test/arc/arc%20test.html

您会注意到原版有漂亮的线条,将底部的弧线与顶部的弧线连接起来。 到目前为止,我只能想到痛苦地放置很多圆圈来实现这种效果,因此目前我的视觉中出现了奇怪的红色圆圈。 人们复制原始图形的最佳方法是什么? 哪个元素会使此任务更容易? 弧?线? 我想我将不得不操纵我的数据,以便这些行到达它们应该去的地方。

如果需要,很乐意提供更多信息,并感谢您抽出宝贵时间阅读本文。

d3 的库中有一些现有的图表可供处理:

http://bl.ocks.org/4062006

http://bost.ocks.org/mike/uberdata/

两者都使用和弦的长度作为笔触的宽度(最初),但你可以修改一下,当然。

在图形上,您可以使用圆弧或带有剪辑的完整圆。至于"最佳"方法,这可能来自图形需要如何表现的"要求"(动画,相对弧线放置等)。

就个人而言,我会选择路径弧。

最新更新