是什么让网格线可见？答案

【问题标题】：What makes grid lines visible?是什么让网格线可见？
【发布时间】：2016-05-25 12:19:33
【问题描述】：

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

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);

【问题讨论】：

网格线通常只是轴刻度。如果你想要更多的控制，你应该分别实现它们。

标签： javascript d3.js data-visualization

【解决方案1】：

从显示的示例中，我实现了这个小提琴：https://jsfiddle.net/6p3bvqrL/

您可以看到以下创建的行：

 .innerTickSize()
 .outerTickSize()

例子：

https://github.com/d3/d3/wiki/SVG-Axes

http://bl.ocks.org/phil-pedruco/6579467

【讨论】：

这对我有用。但还有一个相关的问题。我可以过滤这些刻度线吗？基本上我已经给出了 .ticks(4,".1s") 。这意味着它只绘制 4 个刻度（文本）。但它仍然在自己绘制所有的刻度线。我怎么能只有 4 作为刻度线（网格线）的数量
设置一个你已经在 JSFiddle 中的例子，我看看

【解决方案2】：

我迟到了，但按照@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);

当然，相应地更改 width、length 和 margin。

您可以在朱的书中找到更多信息：http://nickqizhu.github.io/d3-cookbook/

PS：我正在展示这个替代方案，但通常，当我创建数据可视化时，我会按照 thatOneGuy 描述的方式进行操作。

【讨论】：