javascript - 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 + ')')