在d3中旋转和翻译文本的正确方法是什么？

Question

我有一个包含两个字符串的数组,我希望它们与两个圆对齐(参见示例:http://bl.ocks.org/3028447)

我现在正在这样做:

.attr("transform", function(d, i) { return "translate(" + x(i)+",0) rotate(-45," + x(1)+"," + 0+") "; })

我确信有一种更简单的方法可以做到这一点,如下所示:

.attr("transform", function(d, i) { return "translate(" + x(i)+",0) rotate(-45) "; })

但是当我使用它时,我得到了这个(http://bl.ocks.org/3028512),我不明白为什么.

Answer 1

您已将变换与x和y属性组合在一起:

.attr("y", 0)
.attr("x", 60)

这些在变换之前(即,在旋转之前)被应用,因此文本与圆圈不在同一位置.有时这种技术很有用; 在X平行移动到文本的基准文本.因此,如果您想将文本稍微放在圆圈外面,可以将x值更改为6而不是60.