Javascript 什么使网格线可见？

这更多的是一个概念性问题。我想在面积图中实现网格线。 我用它作为参考。在这个示例中，我无法理解代码中究竟在哪里绘制网格线，以便在我的面积图中实现这些网格线。我使用以下代码来绘制轴

var yAxis = d3.svg.axis()
          .scale(y)
          .orient("left")
          .ticks(4,".1s")
          .tickSize(10, 0);

        var xAxis = d3.svg.axis()
          .scale(x)
          .orient("bottom")
          .ticks(numberOfDays)
          .tickSize(10, 0);

        vis.append("g")
          .attr("class", "y axis")
          .call(yAxis);
        vis.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + HEIGHT + ")")
          .call(xAxis);

---

从所示的示例中，我实现了此小提琴：

您可以看到以下内容创建了这些线：

 .innerTickSize()
 .outerTickSize()

示例：

---

我参加聚会迟到了，但是按照@Robert所说的，如果你想对网格线有更多的控制，你可以单独添加网格线

首先，设置CSS：

.axis .grid-line{
    stroke: black;
    shape-rendering: crispEdges;
    stroke-opacity: .2;
}

然后，在调用轴之后：

d3.selectAll("g.x-axis g.tick") 
        .append("line")
        .classed("grid-line", true)
        .attr("x1", 0)
        .attr("y1", 0)
        .attr("x2", 0)
        .attr("y2", - (height - 2 * margin));

d3.selectAll("g.y-axis g.tick")
        .append("line")
        .classed("grid-line", true)
        .attr("x1", 0)
        .attr("y1", 0)
        .attr("x2", (width - 2 * margin)) 
        .attr("y2", 0);

当然，要相应地改变

宽度

、

长度

和

边距

您可以在朱的书中找到更多信息：

---

PS：我正在展示这个替代方案，但通常，当我创建dataviz时，我会按照那个家伙所描述的方式进行操作。

网格线通常只是轴刻度。如果你想要更多的控制权，你应该单独实施。这对我来说就行了。但还有一个相关的问题。我可以过滤这些刻度线吗。基本上我已经给出了.ticks（4，.1s）。这意味着它只打印4个记号（文本）。但它仍在自己绘制所有刻度线。我怎么可能只有4条刻度线（网格线）呢？我将为您在JSFIDLE中已有的设置一个示例，我来看看