D3.js：如何倾斜/旋转集合中的单个文本元素而不旋转它们？答案

【问题标题】：D3.js: How do you tilt/rotate individual text elements within a collection without rotating them all?D3.js：如何倾斜/旋转集合中的单个文本元素而不旋转它们？
【发布时间】：2019-06-19 18:54:11
【问题描述】：

如何倾斜/旋转集合中的单个文本元素而不旋转它们？下面的 js fiddle 显示了倾斜的文本，但不是单独的，都在一个组中。我希望文本垂直对齐。

http://jsfiddle.net/mcroteau/6c3puj8s/16/

var texts = circle.enter().append("text")
        .attr("x", 10)
        .attr("y", function(d, index){
            index = index + 1
            var y = starting
            if(index > 1){
                y = index * increment - 10
            }
            return y
        })
        .text( function (d) { 
            return "test"
         })
        .attr("font-family", "sans-serif")
        .attr("font-size", "11px")
        .attr("fill", "black")
        .attr("transform", "rotate(345, 30, 0)")

这会将整个组旋转 45 度，而不是每个单独的文本元素。提前感谢您的帮助。

正如您从图像中看到的那样，有一条垂直线我想对齐文本，但每条线都倾斜。旋转变换适用于所有文本，就好像它是一个元素一样。

【问题讨论】：

使用旋转属性，例如rotate="10 20 40" 等
谢谢。我试过了，见上。我接近它错了吗？我看到你有三个值。
3 个值表示 3 个字符。根据需要进行调整。
使用函数.attr("transform", (d,i) => 'rotate(${i*5})')（使用模板字符串反引号）
感谢您的三个价值观，这让我更加接近。仍然适用于组而不是单个元素。

标签： javascript css d3.js svg

【解决方案1】：

您的问题是平移（x 和 y 属性）发生在旋转之前 - 您的所有文本项都具有相同的轴心点 0;0，因此看起来好像它们是一起旋转的。如果您先旋转，则枢轴点将固定在每个文本元素的开头，即使您随后使用翻译移动它也是如此。

解决它的一种方法是完全删除 x 和 y 属性，并仅使用 transform 属性。这样您就可以指定操作的顺序并获得所需的结果。

var svg = d3.select('svg');

var dataSet = [10, 20, 30, 40, 20, 10, 30];

var text = svg.selectAll('text')
    .data(dataSet)
    .enter()
    .append('text')
    .text( function (d) { 
      return "test";
    })
    .attr("font-family", "sans-serif")
    .attr("font-size", "21px")
    .attr("fill", "black")
    .attr("class", "sequence-node-label")
    .attr("transform", function(d, i){
        var y = (i + 1) * 20;
        return "translate(0,"+y+"),rotate(345)";
    });

请注意，操作从右到左发生，这源于传统上表示为矩阵的转换。

【讨论】：