Question

我正在使用d3js在svg中创建圈子。在每个圆圈中，我想放一些文字（一封特定的字母）。我的问题是：如何使文本的中心与圆心相匹配？我的例子是“备忘录”这个词：“m”的像素长度大于“e”：所以如果我正确地定位“e”，“m”就不会完全位于中间：（

这是我的代码：
d [0]包含字母
eval_r给出计算圆的半径的公式 eval_x给出了计算半径中心的x位置的公式 eval_y给出了计算半径中心的y位置的公式

g_.append("text")
    .text   (         function(d,i) { return d[0] ; })
    .attr   ("dx"   , function(d,i) { return x( eval(eval_x) ) + (1/3 * eval(eval_r)) ;}) 
    .attr   ("dy"   , function(d,i) { return y( eval(eval_y) ) - (1/4 * eval(eval_r)) ;})   
    .attr   ("fill" , "white");

所以我在经验上尝试将1/3和1/4确定为对任何字母居中的良好匹配，但正如我所说，它并不完美。我想确定一个“m”和一个“e”（或任何字母）的像素长度来调整计算x的公式，这样我就可以完美地将圆圈内的字母居中。

Thks：）

Answer 1

感谢Robert的解决方案：

 g_.append("text")
    .text   (         function(d,i) { return d[0] ; })
    .attr   ("text-anchor" , "middle")
    .attr   ("dx"   , function(d,i) { return x( eval(eval_x) ) + (1/2 * eval(eval_r)) ;}) 
    .attr   ("dy"   , function(d,i) { return y( eval(eval_y) ) - (0 * eval(eval_r)) ;})   
    .attr   ("fill" , "white");

svg：字符的像素数

1 个答案: