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

Question

我在网上看到了一张信息图，我想用它来挑战学习 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

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

如果需要，很高兴提供更多信息，并感谢您花时间阅读本文。

Answer 1

d3 的画廊中有一些现有的图表可供使用：

http://bl.ocks.org/4062006

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

两者都使用和弦的长度作为笔划的宽度（最初），但你可以修改它，当然。

在图形上，您可以使用arcs或带有夹子的完整圆圈。至于做到这一点的“最佳”方式，这可能来自于图形需要如何表现的“要求”（动画、相对弧线放置等）。

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