Question

我想以黄色旋转标签。

我已经浏览了这个链接

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

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

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

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

d3.min.js：1错误：属性变换的值无效=“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问题，这将是另一个问题。

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

1 个答案: