使用d3.js在SVG中旋转文本

Question

我对于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; });

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

这里我错过了什么？感谢任何指导！

- seth127

---

这是您正在寻找的内容吗？https://dev59.com/OWgu5IYBdhLWcg3winnU - mrdeadsven

<text> 的 rotate 属性与 transform 属性中的 rotate 是不同的。请参考 MDN: *"此属性设置了每个单独字形的方向。"*。 - Gerardo Furtado

Answer 1

目前你正在旋转每个文本元素：

.attr("rotate", 315)

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

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

您需要根据自己的需求调整值，但这应该可以解决问题。

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

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

- cullimorer

---

谢谢。我不是100%确定，但那似乎是相对于原点旋转它们。我想相对于我给它们的 attr("x", ..) 和 attr("y", ..) 旋转它们。如果需要，我可以附上屏幕截图。 - seth127

好的，请附上尽可能详细的截图。 - cullimorer

我现在想我明白你的意思了。我已经更新了答案，包括我认为你想要的内容。 - cullimorer

我无法使你的想法在实践中运行 @ArnaudStephan，请参见http://plnkr.co/edit/9pxJLz?p=preview - cullimorer

@ArnaudStephan 如果你再看一下我的 plnkr，你就会看到将我说的内容添加到 transform 函数中会得到所需的结果。 - cullimorer