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属性添加到类'axis'。那没用。但是，这可以改变字体大小：

 .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

见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

中使用该类名作为参考

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

1 个答案: