如何风格轴堆积条形图，d3.js

Question

我在http://bl.ocks.org/mbostock/3886208

我的问题作出了叠置条形图使用的例子是，我想我的页面有一个黑色的背景，我不能似乎用不同的颜色来设计x和y轴。这似乎是一件容易的事。

这是我曾尝试：

g.append("g") 
    .attr("class", "axis axis_x") 
    .attr("transform", "translate(0," + height + ")") 
    .style("font", "14px sans-serif") 

    //this did not work. 
    .attr("fill", "#f00") 

    .call(d3.axisBottom(x)); 

我也试着CSS属性添加到类“轴”。这没有用。然而，这种努力改变字体大小：

.style("font", "14px sans-serif") 

此外，在图例相同的代码，这并努力改变的传奇色彩：

g.append("g") 
    .attr("class", "axis axis_y") 
    .call(d3.axisLeft(y).ticks(10, "s")) 
.append("text") 
.classed('x_axis', true) 
    .attr("x", 2) 
    .attr("y", y(y.ticks(10).pop())) 
    .attr("dy", "0.35em") 
    .attr("text-anchor", "start") 

    //this did not work. 
    .attr("fill", "#f00") 

    .style("font", "20px sans-serif") 
    .text("Calories"); 

所以我的问题是，为什么我不能改变x和y轴的颜色或填充，就像我改变图例的颜色或填充一样。

任何帮助将不胜感激。

Answer 1

SEE https://plnkr.co/edit/f8SLs3kcL8ahmec1TrEg?p=preview

实际上填充被内部设置由

.call(d3.axisBottom(x)); 

从文档https://github.com/d3/d3-axis/blob/master/src/axis.js#L66 可以在线路＃观察66和＃由轴的功能组72这就是，看看ITW在线＃168有线返回

但你可以通过像这样的css解决方案做到这一点

.axis g text{ 
    fill:#ffffff; 
} 

.axis g line{ 
    stroke:#ffffff; 
} 

但是如果你有多个图表，请确保您在此

g.append("g") 
    .attr("class", "axis axis--x") 
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.axisBottom(x)); 

添加独特的CSS类，这样你可以在CSS中使用该类名作为参考