d3 метки оси x, выведенные как длинная строка

Question

Я пытаюсь повернуть свою метку оси x для гистограммы с d3, созданной в d3. Все ярлыки отображаются либо как длинная строка, либо все поверх друг друга.

Вот мой код этикетки:

var shortNames = ["label1", "label2", "label3", "label4"]; 

// Add a label per experiment. 
var label = svg.selectAll("text") 
.data(shortNames) 
.enter().append("svg:text") 
.attr("x", function(d) { return x(d)+x.rangeBand()/2; }) 
.attr("y", 6) 
.attr("text-anchor", "middle") 
.attr("dy", ".71em") 
.text(function(d) {return d}) 
.attr("transform", function(d) { // transform all the text elements 
return "rotate(-65)"   // rotate them to give a nice slope 
}); 

Я играл с функцией перевода и все метки все еще рассматривают как одну длинную строку. Как применить перевод к каждому отдельному ярлыку?

Я могу поиграть с полями позже, но пока я хочу контролировать свои ярлыки.

Answer 1

Я думаю, что вопрос является порядком преобразований: При повороте текста, вы также вращающийся своей системе координат. Поэтому, когда вы устанавливаете свою позицию x - даже если вы устанавливаете позицию раньше, чем преобразование вращения, вы фактически перемещаете ее по оси 65 градусов, возникающей в результате вращения.

Если я прав, ознакомление с этими ярлыками показало бы, что они все еще состоят из нескольких текстовых элементов (по одному на метку), а не одного текстового элемента для всех меток.

Как правило, когда вы вводите атрибут transform, как и для rotate, вы должны сделать все свои преобразования с помощью этого атрибута. Таким образом, вам нужно использовать translate вместо атрибута "x". Тогда это будет выглядеть так:

var label = svg.selectAll("text") 
.data(shortNames) 
.enter().append("svg:text") 
// REOVE THIS: .attr("x", function(d) { return x(d)+x.rangeBand()/2; }) 
// AND THIS TOO: .attr("y", 6) 
.attr("text-anchor", "middle") 
.attr("dy", ".71em") 
.text(function(d) {return d}) 
.attr("transform", function(d) { // transform all the text elements 
    return "translate(" + // First translate 
    x(d)+x.rangeBand()/2 + ",6) " + // Translation params same as your existing x & y 
    "rotate(-65)"   // THEN rotate them to give a nice slope 
});