d3.js - 在 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。