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

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

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

Answer 1

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

.attr("rotate", 315)

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

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

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

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

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