D3圆环图文本居中

Question

我正在为一个项目使用 d3 圆环图，但我在将圆环内的文本居中时遇到了问题。我找到了一段我正在修改的代码，但坦率地说我不太明白。

我在中间添加了文本，但它不是很居中。有没有人可以帮助我将其居中？我尝试添加 'margin-top' 来降低它，但这不起作用，我尝试过的很多 css 也没有做。

附上正文的具体部分如下：

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

代码笔： http://codepen.io/anon/pen/xwwBBm

Answer 1

你可能已经注意到，圆圈外的两个标签是垂直居中的，但中间的标签不是。

缺少以下行：

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

这是新的codepen。

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