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 。

我会留给你发现为什么那条神奇的线条。