Question

这是一个概念性问题。我想在区域图中实现网格线。我使用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);

Answer 1

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

您可以看到以下内容创建了一行：

 .innerTickSize()
 .outerTickSize()

示例：

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

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

Answer 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：我正在展示这种替代方案，但通常情况下，当我创建dataviz时，我会按照theOneGuy的描述进行操作。

什么使网格线可见？

2 个答案: