Javascript d3.js 轴标签 - 颜色不变
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/12057145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
d3.js axis labels - color not changing
提问by Mobie
I'm creating my axis with the following text, however the color of the labels is not changing properly; the color the text remains black. Does anybody know why?
我正在使用以下文本创建我的轴,但是标签的颜色没有正确更改;文本颜色保持黑色。有人知道为什么吗?
// create Axis
svg.selectAll(".axis")
.data(d3.range(angle.domain()[1]))
.enter().append("g")
.attr("class", "axis")
.attr("transform", function(d) { return "rotate(" + angle(d) * 180 / Math.PI + ")"; })
.call(d3.svg.axis()
.scale(radius.copy().range([-5, -outerRadius]))
.ticks(5)
.orient("left"))
.append("text")
.attr("y",
function (d) {
if (window.innerWidth < 455){
return -(window.innerHeight * .33);
}
else{
return -(window.innerHeight * .33);
}
})
.attr("dy", ".71em")
.attr("text-anchor", "middle")
.text(function(d, i) { return capitalMeta[i]; })
.attr("style","font-size:12px;")
.style("color","#DE3378"); <--------------- adding color attribute here...
EDIT- trying to color different axis labels different colors with the following code, however this is not working properly...
编辑- 尝试使用以下代码为不同的轴标签着色不同的颜色,但是这无法正常工作......
.style(function() {
for (var i = 0; i < unhealthyArray.length; i++) {
if ($.inArray(unhealthyArray[i], capitalMeta) != -1)
return "fill","red";
else
return "fill","black";
}
});
回答by Lars Kotthoff
You need to use the stroke
attribute (for the outline) or fill
(for the fill colour). See e.g. this tutorial.
您需要使用stroke
属性(用于轮廓)或fill
(用于填充颜色)。参见例如本教程。