Drehen Sie die Etiketten im Säulendiagramm d3.JS

Question

Ich möchte die Etiketten in gelber Farbe drehen.

image for the labels

ich habe

rotate x axis text in d3

über diesen Link gegangen, aber in diesem Link die Werte für die Funktion sind statische Werte übersetzen weitergegeben werden.

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

ich möchte dynamische Werte übergeben, die von einer Funktion zurückgegeben werden.

so in diesem Code der x- und y nehmen Werte von Funktionen, so dass ich diese Werte an das übersetzen Attribut übergeben will, aber in der Konsole

d3.min.js immer Fehler: 1 Fehler: ungültigen Wert für attribute transform = "translate (\) Funktion (d) {return xScale (d.lountry) + xScale.rangeBand()/2;} \", \ "Funktion (d) {return yScale (d.populationValue) + 12; } \ ") drehen (-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

Sie haben alle 012 zurückkehrenString mit der Funktion:

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

PS: nachdem Sie das tun, ich wette, dass das Ergebnis nicht das, was Sie erwarten ... aber das wird ein anderes Problem, für eine andere SO Frage sein.