javascript - 如何在d3中制作自定义甜甜圈图？

Question

我目前需要创建一个如图所示的图表。

我的方法

现在我按照样板代码在 3 个组件中创建了 3 个圆环图。我计划根据我的数据为每个甜甜圈图着色，可能使用钩子/道具更改。使用这种方法，我有以下输出：

通过这种方式，我无法删除每个弧上的外部笔划。

阅读 d3 文档我认为这不是解决这个问题的正确方法。

• 有没有更“d3”的方法来解决/创建这个图表？
• 如果我将继续解决这个问题，我怎样才能删除外部笔划？
• 如何制作外弧标签？

到目前为止，这是我的代码： Codesandbox

标签： javascriptreactjsd3.js