在柱形图中旋转标签 d3.JS答案

【问题标题】：Rotate labels in column chart d3.JS在柱形图中旋转标签 d3.JS
【发布时间】：2016-11-18 05:10:45
【问题描述】：

我想旋转黄色的标签。

我已经浏览了这个链接

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

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

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

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

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

【问题讨论】：

标签： javascript css d3.js svg

【解决方案1】：

您必须使用函数返回所有translate 字符串：

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

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

【讨论】：