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。

我会留给你发现为什么这条线路神奇。