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