d3.js 在 svg 中旋转文本

Question

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

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

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

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

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

Answer 1

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

.attr("rotate", 315)

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

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

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

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

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