2

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

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

在此处输入图像描述

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

4

1 回答 1

3

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

.attr("rotate", 315)

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

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

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

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

.attr('transform', 'rotate(45 ' + xValue + ' ' + yValue + ')')
于 2018-05-24T11:17:32.493 回答