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。