D3.js 如何仅更改图表中数据网格或 x 轴和 y 轴的颜色

Question

我想从 X 轴和 Y 轴制作单独的数据网格。非常轻的 DataGrid 和深色 X 和 Y 轴

我试过了，但它总是在路径域中画笔画=当前颜色

var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .innerTickSize(-height)
    .outerTickSize(0)
    .tickPadding(10);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .innerTickSize(-width)
    .outerTickSize(0)
    .tickPadding(10);

svg.append("g") // Add the X Axis
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

svg.append("g") // Add the Y Axis
    .attr("class", "y axis")
    .call(yAxis);

这里是CSS

.axis line {
    stroke: red !important;
    opacity: 0.3;
}

.axis path {
    stroke: red !important;
    opacity: 0.3;
}

.axis text {
    fill: red !important;
}

    [![enter image description here][2]][2]

Answer 1

d3 将 class tick 添加到所有包含网格线的组（称为刻度线，因为它们也可以用作刻度线）。

您可以在 CSS 中对 select 他们做这样的事情：

.axis .tick line {
  fill: none;
  stroke: black;
  opacity: 0.1;
}

已更新 fiddle：http://jsfiddle.net/w7jrxnk5/

Answer 2

您可以通过两种方式解决此问题：

有一个 d3 解决方案，基本上不需要 css

svg.append("g") // Add the X Axis
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .call(g => g.selectAll(".tick:first-of-type line")
                .attr("class", "axis_bar")
                .attr("stroke", "black"))
    .call(g => g.selectAll(".tick:not(:first-of-type) line")
                .attr("class", "axis_y_tick")
                .attr("stroke", "red"));

svg.append("g") // Add the Y Axis
    .attr("class", "y axis")
    .call(yAxis)
    .call(g => g.selectAll(".tick:first-of-type line")
                .attr("class", "axis_bar")
                .attr("stroke", "black"))
    .call(g => g.selectAll(".tick:not(:first-of-type) line")
                .attr("class", "axis_y_tick")
                .attr("stroke", "red"));
          
svg.append("path") // Add the valueline path.
    .attr("d", valueline(data))
    .attr("class", "graph")
    .attr("stroke", "blue")
    .attr("stroke-width", 2);

这会选择第一行和后面的每一行，并应用不同的样式参数。

第二种解决方案是仅在 css 中执行此操作。您可能会在 d3 代码段中看到您需要的 class-selectors：

.tick:first-of-type line {} //Selects the first Tick/Line wich becomes the main axis.

.tick:not(:first-of-type) line {} // Will select every other tick line, but the first.

我编辑了你的 fiddle 适合 d3 的解决方案：http://jsfiddle.net/nk13jycw/2/

Mike Bostock 对此也有一个很好的观察：https://observablehq.com/@d3/styled-axes

D3.js 如何仅更改图表中数据网格或 x 轴和 y 轴的颜色

How to change color only for data grid or x and y axis in chart in D3.js

d3.js

angularjs