Question

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

我想知道如何利用比例尺或轴允许我绘制网格（大概是矩形），我可以为网格的每个部分设置不同的背景颜色...所以我可以交替网格的每个单元格的颜色。我希望绘制网格并使其受到图形轴的约束，然后如果轴的间距变化（即轴的变化如下：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。

Answer 2

因此，经过上面几条有用的评论后，我已经接近解决方案了。使用Ordinal测距带让我接近我想去的地方。

我通过使用轴上的刻度数作为输入域范围的基础创建了范围带：

  var xScale = d3.scale.ordinal()
            .domain(d3.range(10))
            .rangeRoundBands([0, width],0);


 var yScale = d3.scale.ordinal()
            .domain(d3.range(4))
            .rangeRoundBands([0, height],0);

然后我试着像这样画出矩形：

svg.selectAll("rect")
           .data(p)
           .enter()
           .append("rect")
           .attr("x", function(d, i) {
                return xScale(i);
           })
           .attr("y", function(d,i) {
                0
           })
           .attr("width", xScale.rangeBand())
           .attr("height", yScale.rangeBand())
                       .attr("fill", "green").
                       attr('stroke','red');

这让我获得了理想的效果，但只有一行深度：

http://jsfiddle.net/Ny2FJ/2/

我想以某种方式为整个表绘制绿色块（并且无需在序数标度域中硬编码滴答数量）。我试着将范围带应用到y轴，就像这样（知道这不会真正起作用）http://jsfiddle.net/Ny2FJ/3/

svg.selectAll("rect")
       .data(p)
       .enter()
       .append("rect")
       .attr("x", function(d, i) {
            return xScale(i);
       })
       .attr("y", function(d,i) {
            return yScale(i);
       })
       .attr("width", xScale.rangeBand())
       .attr("height", yScale.rangeBand())
                   .attr("fill", "green").
                   attr('stroke','red');

我能想到的唯一方法就是引入一个for循环来为y轴的每个刻度线运行这个小提琴http://jsfiddle.net/Ny2FJ/2/中的代码块。

使用比例绘制网格或矩形

2 个答案: