D3甜甜圈图文本居中

Question

我在项目中使用的是d3甜甜圈图，但在甜甜圈内部将文本居中时遇到问题。我找到了一段已修改的代码，但坦率地说我不太了解。

我在中间添加了文本，但它并没有居中。有没有人可以帮助我确定中心？我尝试添加'margin-top'来降低它，但这不起作用，也没有做很多我尝试过的CSS事情。

这是附加文本的特定部分：

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

Codepen：http：//codepen.io/anon/pen/xwwBBm

Answer 1

您可能已经注意到，圆外的两个标签垂直居中，而中间的一个则没有。

它缺少以下行：

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

这是新的Codepen。

我将留给您了解这行为何如此神奇。