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

我有一个包含两个字符串的数组，我希望它们与两个圆对齐（参见示例：）

我目前正在这样做：

.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) "; })

---

但是当我使用它时，我得到了这个（），我不明白为什么。

您已经将变换与x和y属性结合起来：

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

---

这些将在变换之前应用（即，在旋转之前），因此文本与圆不在同一位置。有时这种技术是有用的；x将平行于文本的基线移动文本。因此，如果您想将文本稍微放在圆圈外，可以将x值更改为6而不是60。

嘿，迈克，谢谢，但是我不会将文本放在第二个和第三个圆圈的顶部（我想跳过第一个圆圈）。有没有比我做的更简单的方法？（这里有一个相同的代码：如果你想把文本和圆放在一起，那么你通常想把它们都放在一个G元素中，把变换放在G元素上，而不是把它们分开放置。但是如果你想把它们分开放置，那么你需要把x添加到变换中（例如，

“translate（“+（x（i）+60）+”，0）”

）。成功了！谢谢。我无法将它们放在同一个组中的原因是，这3个圆已经属于一个包含其他内容的组，并且只有后两个圆有标题。您可能可以通过一个键函数来修复这一问题（因此，两个数据对象绑定到最后两个圆，而不是前两个圆），但是是的。