在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.