Javascript D3圆环图文本居中

我正在为一个项目使用d3甜甜圈图表，我在甜甜圈内的文本中心有问题。我发现了一段我已经修改过的代码，但坦率地说，我不太理解它

我已经在中间添加了文本，但它没有完全居中。有人能帮我把它放在中心吗？我试着添加“边距顶部”来降低它，但这不起作用，我也尝试了很多css的东西

以下是附加文本的特定部分：

 svg.append("text")
       .attr({
         "text-anchor": "middle",
       }).style({'fill': 'red', 'font-size': '18px'}).text(calories);
};

代码笔：

---

你可能已经注意到，两个标记在圆圈之外是垂直居中的，而中间的则不是。

它缺少以下行：

 .attr('dy', '0.35em')

这是新的

---

我将留给你去发现为什么这句话很神奇。

试试这个，这正是我用来帮助我添加中间文本的第一个问题。结果就是你在我的代码笔里看到的。它没有居中，我明白。我看到的是垂直对齐问题。我不是一个真正的svg专家，但这里有一个更接近的例子：尝试添加文本this:transform origin:0px 0px 0px；