Javascript D3.js：我如何给网格的顶部和右侧线条赋予相同的样式，并且样式与网格线相同？

我是d3.js的新手，但我想删除或修改这些线的样式，使其与网格线的颜色相同

我用以下代码创建了网格线：

    setGrid(canvas, scales){
    //Y Axis grid
    canvas.append("g")
    .attr("class", "grid")
    .attr("transform", "translate(" + OFFSET_LEFT + ", 0)")
    .call(d3.axisLeft(scales.yScale).tickSize(-(WIDTH - OFFSET_LEFT - OFFSET_RIGHT)).tickFormat(""));
    //X Axis grid
    canvas.append("g")
    .attr("class", "grid")
    .attr("transform", "translate(0, " + OFFSET_TOP + ")")
    .call(d3.axisBottom(scales.xScale).tickSize((HEIGHT - OFFSET_BOTTOM - OFFSET_TOP)).tickFormat(""));
}

我有这个css的风格：

.grid line{
    stroke: blue;
}

---

如果要设置轴的样式，可以将以下代码附加到轴上：

.call(g => g.select('.domain').remove()) // removes the lines that make a square around the chart
.call(g =>
  g.selectAll('.YAxisLabel .tick:first-of-type line').attr('stroke', '#D4D4D4'), // append a style to line with ticks
);

---

@Jose_Carlos如果您提供工作JSFIDLE或stackblitz，这将非常有用