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

我在网上看到了一张信息图，我想用它来挑战学习d3.js。原始信息图如下所示：

我从这里开始：

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

---

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

d3中有一些现有图表可供参考：

两者都使用弦的长度作为笔划的宽度（最初），但您可以对此进行修补

从图形上看，您可以使用，也可以使用带剪辑的完整圆圈。至于“最佳”方式，这可能来自于图形行为的“要求”（动画、相对圆弧放置等）

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