如何在此d3.js visual中用一条线连接两个弧

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的galleries：

开始

http://bl.ocks.org/4062006

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

两者都使用和弦的长度作为笔画的宽度（最初），但你可以肯定地修补它。

以图形方式，您可以使用arcs或带有剪辑的完整圆圈。至于“最好”的方法，可能来自图形需要表现的“要求”（动画，相对弧线放置等）。

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