Поверните этикетки в колонке d3.JS

Question

Я хочу повернуть этикетки желтым цветом.

image for the labels

я прошел через эту ссылку

rotate x axis text in d3

, но в этой связи значение передается функция перевода статических значения.

<text transform="translate(200,100)rotate(180)">Hello!</text> 

Я хочу передать динамические значения, возвращаемые функцией.

так что в этом коде х и у принимают значения из функций, поэтому я хочу, чтобы передать эти значения в атрибуте перевод, но получаю ошибку в консоли

d3.min.js: 1 Ошибка: Недопустимое значение атрибут transform = "translate (\" function (d) {return xScale (d.country) + xScale.rangeBand()/2;} \ ", \" function (d) {return yScale (d.populationValue) + 12; } \ ") вращаются (-90)"

.attr({ 
"x": function(d){ return xScale(d.country) + xScale.rangeBand()/2; }, 
"y": function(d){ return yScale(d.populationValue)+ 12; }, 
"text-anchor": 'middle', 
"fill": 'yellow', 
"transform": 'translate("function(d){ return xScale(d.country) + xScale.rangeBand()/2; }","function(d){ return yScale(d.populationValue)+ 12; }")rotate(-90)' 

expected output

Answer 1

Вы должны вернуть все translate строка с помощью функции:

"transform": function(d){ 
    return "translate(" + xScale(d.country) + xScale.rangeBand()/2 
    + "," + yScale(d.populationValue) + 12 + ")rotate(-90)" 
}; 

PS: после того, как вы сделаете это, я уверен, что результат будет не то, что вы ожидаете ... но это будет еще одна проблема, для другого SO вопрос.