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

Обратите внимание, что операции происходят справа налево, что происходит от преобразований, традиционно представляемых в виде матриц.