如何在堆积条形图中设置轴样式-d3.js答案

【问题标题】：How to style axis in stacked bar chart-d3.js如何在堆积条形图中设置轴样式-d3.js
【发布时间】：2016-12-02 12:04:35
【问题描述】：

我使用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 轴的颜色或填充。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

见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 行观察到由轴功能设置的内容，并查看第 168 行如何连接返回

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

.axis g text{
  fill:#ffffff;
} 

 .axis g line{
  stroke:#ffffff;
}

但如果您有多个图表，请确保在此期间添加唯一的 css 类

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

这样您就可以在 css 中使用该类名作为参考

【讨论】：

完美运行，谢谢！