D3圆环图文本居中 [英] D3 donut chart text centering

问题描述

我正在为一个项目使用d3圆环图，我有问题将文本集中在甜甜圈内。我发现了一段我修改过的代码，但坦率地说，我对此并不了解。

我已经在中心添加了文字，但它并没有完全集中。有没有人可以帮我中心呢？我尝试添加'margin-top'来降低它但是这不起作用，也没有尝试过很多css的东西。

以下是附加文字的具体部分：

  svg。 append（text）
 .attr（{
text-anchor：middle，
}）。style（{'fill'：'red'，'font-size '：'18px'}）。文字（卡路里）; 
}; 
  

Codepen：

我会留给你发现为什么这一行神奇的。

I'm using a d3 donut chart for a project and I'm having issues centering the text inside the donut. I found a piece of code that I have modifying, but frankly I don't understand it much.

I have added the text in the center, but it's not quite centered. Is there anyone that could help me center it? I tried adding 'margin-top' to bring it down but that doesn't work, nor do a lot of css things I tried.

Here's the specific part that attaches the text:

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

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

解决方案

You may have noticed that two labels outside the circle are vertically centered, but the one in the middle is not.

It is missing following line:

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

This is the new codepen.

I will leave to you to discover why is that line magical.

这篇关于D3圆环图文本居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！