d3.js - 使用比例绘制网格或矩形

Question

我正在 d3 中构建我的第一个折线图:

http://jsfiddle.net/j94RZ/

我想知道如何利用比例尺或轴来绘制一个网格(大概是矩形)，我可以在其中为网格的每个部分设置不同的背景颜色......所以我可以为每个部分交替颜色网格的单元格。我希望绘制网格并受图形轴的约束，然后如果轴刻度的间距发生变化(即轴像这样变化: http://bl.ocks.org/mbostock/1667367 )也进行调整。因此，如果我的图形有一个带有 4 个刻度的 x 轴和一个带有 7 个刻度的 y 轴，那么我的图形将有一个高 7 块、宽 4 块的背景网格。

我一直在考虑使用从零开始到图形的全宽结束的范围的想法，但我不知道我可以为该步骤使用什么值。有什么方法可以查询轴并返回有多少个刻度？

var gridRange = d3.range(0, width, step?); 

Answer 1

比您当前的解决方案更好的方法是使用 scale.ticks() 明确获取刻度值。这样做的好处是，如果您出于某种原因更改刻度数，它仍然可以工作。

要获得交替的网格图案而不是单个填充，您可以使用类似此代码的内容。

.attr("fill", function(d, i) {
    return (i % 2) == 1 ? "green" : "blue";
})

最后，要获得完整的网格模式，您可以按照建议使用显式循环，或者 nested selections .这里的想法是首先传入y滴答声，创建一个 g每个元素然后传递 x勾选这些组中的每一个。在代码中，这看起来像这样。

svg.selectAll("g.grid")
   .data(y.ticks()).enter().append("g").attr("class", "grid")
   .selectAll("rect")
   .data(x.ticks()).enter().append("rect");

要设置位置，您可以像这样访问顶层和底层数据数组中的索引。

.attr("x", function(d, i) {
    return xScale(i);
})
.attr("y", function(d, i, j) {
    return yScale(j);
})

设置 x位置，您需要内部数组的索引(传递给 g 元素的集合)，可以通过回调的第二个参数访问。对于外部数组，只需添加另一个参数(此处为 j)。

这就是它的全部内容。完整的 jsfiddle here .要动态更新此网格，您只需传入新的刻度值(从 scale.ticks() 获取)，与现有数据匹配，并以通常的方式处理进入/更新/退出选择。

如果您不想使用辅助比例尺(即没有 .rangeBand() )，您可以通过取比例尺范围的范围并将其除以刻度数减 1 来计算矩形的宽度/高度。总而言之，这使得代码有点难看(主要是因为您需要的矩形比刻度少一个，因此需要减去/删除)，但更通用。采用这种方法的 jsfiddle 是 here .