I want to rotate the labels in yellow color.
i have gone through this link
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)'
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.