如何更改 d3.js 轴线的颜色

Question

这是我的代码。我想将实际轴线的颜色从黑色更改为灰色。

var xAxisCall = d3.axisBottom(x);
  g.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0, " + height + ")")
    .call(xAxisCall)
    .selectAll("text")
        .attr("y", "10")
        .attr("x", "-5")
        .attr("text-anchor", "end")
        .attr("transform", "rotate(-40)")
        .style("fill", "#999999");

Answer 1

如果您使用的是 D3 v5（也可能是 v4），默认样式现在嵌入在元素级别，这样您就不必自己在 CSS 中指定它。解决这个问题的一种方法是用 CSS 的 !important 标志覆盖它。

.x.axis line {
    stroke: gray !important;
}

或者在使用 d3 调用轴后将其重新应用于元素：

d3.selectAll(".x.axis line")
    .style("stroke","gray");

可能需要一些技巧，但原则应该有效。