旋转柱形图中的标签 d3.JS

Rotate labels in column chart d3.JS

本文关键字：d3 JS 标签 柱形图 旋转      更新时间：2023-09-26

我想用黄色旋转标签。

标签的图像

我已经通过这个链接

在 D3 中旋转 x 轴文本

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

<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; }''"）旋转（-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)'

预期产出

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

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

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

相关文章：