文章/答案/技术大牛

发布

社区首页 >问答首页 >旋转柱形图d3.JS中的标签

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

Stack Overflow用户

提问于 2016-07-15 13:36:06

回答 1查看 173关注 0票数 0

我想把标签旋转成黄色。

image for the labels

我已经浏览过这个链接

rotate x axis text in d3

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

<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

Stack Overflow用户

发布于 2016-07-15 13:40:40

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

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

PS:在你这样做之后，我打赌结果不会像你预期的那样……但这将是另一个问题，对于另一个问题。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38388517

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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