Javascript 如何自定义D3图表标签

我有一个自定义图表，我正试图把它们放在一起。图表将是响应性的，要求如下所示

我不确定如何做外部灰色勾号。我的工作代码显示不正确

此外，标签上的任何提示都非常有用

现在看起来是这样的。

---

不是React用户，也从未听说过PieHooks等，但多亏了您的工作演示，我可以随意摆弄，看到刻度值不是设置为圆圈周围的绝对值，而是偏移到最后一个刻度-事实上就像“数据”一样

e、 g.这给出了36个均匀分布的记号（尽管我不知道为什么它们开始时稍微偏离垂直）：

for（设i=0；i<36；i+=1）{
dataTicks.push（{value:1}）；
}

希望这能有所帮助

  for (let i = 0; i < 36; i += 1) {
      dataTicks.push({value: 1});
  }