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

Question

如何在不旋转所有文本元素的情况下倾斜/旋转集合中的单个文本元素？下面的js小提琴显示了倾斜的文本，但不是单独倾斜的，而是全部在一起。我希望文本垂直对齐。

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度。预先感谢您的帮助。

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

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

请注意，操作是从右向左发生的，这是由于变换通常以矩阵形式表示。