0

I want to rotate the labels in yellow color.

image for the labels

i have gone through this link

rotate x axis text in d3

but in this link the values being passed to the translate function are static values.

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

i want to pass dynamic values returned by a function.

so in this code the x and y are taking values from functions so i want to pass these values to the translate attribute but getting error in the console

d3.min.js:1 Error: Invalid value for attribute transform="translate(\"function(d){ return xScale(d.country) + xScale.rangeBand()/2; }\",\"function(d){ return yScale(d.populationValue)+ 12; }\")rotate(-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

Community
  • 1
  • 1
Rakesh
  • 57
  • 7

1 Answers1

1

You have to return all the translate string using the function:

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

PS: after you do this, I bet that the result will not be what you expect... but that will be another problem, for another SO question.

Gerardo Furtado
  • 100,839
  • 9
  • 121
  • 171