D3动态垂直对齐文字

时间:2016-03-29 13:48:25

标签: javascript d3.js svg

我在这里看到一些关于使用dy垂直对齐文本的帖子,但是所有这些都只是选择一个随机值而不解释它。当然这个值会因字体大小而有所不同?我的文字字体大小存储在变量(fsize)中,其值可能会根据其他因素而变化。我尝试设置.attr("dy", fsize / 2)(不完全是因为fsize是一个字符串和ems,但是你明白了),我的文字偏离中心。如果字体大小为fsize,我应该选择什么值?

1 个答案:

答案 0 :(得分:3)

“这个值肯定会因字体大小而异吗?”

如果您使用'em'单位,那么字体大小应该无关紧要,因为它们是相对大小的单位

https://www.w3.org/WAI/GL/css2em.htm

所以你可以使用像.attr("dy", "0.7em")这样的经验法则,它可以将文字y-wards移动70%的字体高度