Question

我从此示例开始，以在折线图中显示网格线

https://bl.ocks.org/d3noob/c506ac45617cf9ed39337f99f8511218

我想保持y轴的自动刻度数。但是，我只想显示每隔y轴的第二条网格线。

请注意，对ticks（）方法使用固定的数字不起作用，因为我不知道为该轴渲染了多少刻度线。对网格线使用固定的数字通常会导致网格线和轴刻度线对齐。

有什么想法要实现吗？

是否可以通过设置不透明度来隐藏第二条网格线？

Answer 1

您可以使用一个简单的CSS选择器来做到这一点吗？

.tick:nth-of-type(2n) line {
  display: none;
}

这将选择第n个（第2个）刻度，并更改行的显示样式。

Answer 2

正如您已经注意到的那样，调整传递给ticks()的参数可能是一个真正的难题，因为如文档中所述，此方法“将返回大约个计数量表域中的代表值” （强调我）。

因此，一种可能的解决方案类似于...

是否可以通过设置不透明度来隐藏第二条网格线？

...正在选择那些<line>，并使用模运算符及其索引：

svg.append("g")
    .attr("class", "grid")
    .call(make_y_gridlines()
        .tickSize(-width)
        .tickFormat("")
    ).selectAll("line")
    .style("opacity", function(_, i) {
        return i % 2 ? 1 : 0;
    });

这是分叉的bl.ocks：https://bl.ocks.org/GerardoFurtado/918c519b8dfb44e9310bc3663f3e546f/12271125ac978db93c550a32745192c469385dfb

仅显示第二条网格线

2 个答案: