如何使用 d3 的 .style() 方法而不是在 .axis path {} 的样式标签中使用 CSS 来设置样式？

Question

我这里有面积图的 d3 代码。我的问题主要是关于轴和刻度线的样式。

目前 x 轴和 y 轴的样式如下：

  .axis line {
        fill: none;
        stroke: red;
        shape-rendering: crispEdges;
    }

  .axis path {
        fill: none;
        stroke: blue;
        shape-rendering: crispEdges;
    }

我不想使用这种方法。假设我想在 javascript 中使用 d3 的 style() 方法更改轴的描边颜色（为绿色）。我尝试这样做：

svg.append("g")
    .attr("class", "x axis")
    .style("stroke", "green")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

我最终将轴文本标签更改为绿色。这不是我想要做的。

我缺少什么？

如何使用 d3 的 style() 方法设置 .axis 线和 .axis 路径的样式。

请在 JSFiddle 上找到我的代码

Answer 1

如果你想使用 JavaScript

使用 selectAll 方法绘制轴后，您可以更改颜色。

svg.append("g")
    .attr("class", "x axis")
    .style("stroke", "green")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

 svg.selectAll(".x.axis *").style({"stroke":"red"});

我刚刚举了一个例子，将所有颜色更改为红色。您只能更改要更改的刻度或文本颜色。

用于线路和路径使用

svg.selectAll(".x.axis line, .x.axis path").style({"stroke":"red"});

但我更喜欢只使用 CSS 来改变颜色。