d3.js在svg中旋转文本

Question

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

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

2018.1.2 (Ultimate Edition)
Build #IU-181.4668.68, built on April 24, 2018

JRE: 1.8.0_152-release-1136-b29 x86_64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
macOS 10.13.4

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

我在这里缺少什么？谢谢你的任何指导！

Answer 1

您正在旋转每个文本元素：

.attr("rotate", 315)

相反，您需要转换整个文本元素，因此请使用以下内容替换rotate：

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

您需要根据需要调整值，但它应该可以解决问题。

你也可以直接将x / y坐标传递给rotate函数以保持它的位置，即

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