Javascript d3.js在svg中旋转文本

我是d3新手，但这似乎是一个相当简单的问题，我找不到答案。也许我只是错过了一些基本的东西。无论如何，任何帮助都是非常感谢的

我在svg中创建了圆圈，我想用文本标记它们，我已经完成了，但是文本重叠，所以我想将文本旋转45度（技术上是315度）。下面是我尝试此操作的代码片段：

        var texts = svg.selectAll("text")
            .data(data)
            .enter()
            .append("text")
            .attr ("x",function(d, i) { return (i * 30) + 50;})
            .attr ("y",function(d) { return 250 - (d.some_var * 50);})
            .attr("rotate", 315)
            .text(function(d){ return d.name; });

奇怪的是，这会旋转单词中的每个字母，而不是旋转整个单词。附上截图

---

我错过了什么？谢谢你的指点

在旋转每个文本元素时：

.attr("rotate", 315)

相反，您需要变换整个文本元素，因此将“旋转”替换为以下内容：

.attr('transform', 'rotate(45)')

您需要根据自己的需要调整这些值，但它应该可以做到这一点

您还可以将x/y坐标直接传递到rotate函数中，以保持其位置，即

.attr('transform', 'rotate(45 ' + xValue + ' ' + yValue + ')')

---

这是你要找的吗<代码>旋转作为

的属性与

变换

属性中的

旋转

不同。请查看“此属性设置每个单独标志符号的方向”。谢谢。我不是100%确定，但这似乎是相对于原点旋转它们。我想将它们相对于我给它们的

attr（“x”，…）

和

attr（“y”，…）

进行旋转。如果有必要，我可以附上一张截图。是的，请你附上一张尽可能详细的截图。我想我现在明白你的意思了。我已经更新了答案以包含我认为你想要的内容。我无法让你的想法付诸实践@ArnaudStephan，我不确定我是否理解你想要什么，因为我觉得你的扑克牌不错。