CODEWITHSUNDEEP
javascriptcssd3.jssvg
Rakesh
Rakesh

Reputation: 57

Rotate labels in column chart d3.JS

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

Upvotes: 0

Views: 208

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102219

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.

Upvotes: 1

Related Questions