javascript - 在柱形图中旋转标签 d3.JS

Question

我想旋转黄色的标签。

image for the labels

我已经通过了这个链接

rotate x axis text in d3

但在此链接中，传递给翻译函数的值是静态值。

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

我想传递函数返回的动态值。

所以在这段代码中，x 和 y 从函数中获取值，所以我想将这些值传递给翻译属性，但在控制台中出现错误

d3.min.js:1 错误:属性 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

Answer 1

您必须使用以下函数返回所有 translate 字符串:

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

PS:在你这样做之后，我敢打赌结果不会是你所期望的......但这将是另一个问题，对于另一个 SO 问题。