使用缩放绘制网格或矩形 [英] draw a grid or rectangles using a scale

问题描述

我在d3中建立第一个折线图：

I'm building my first line graph in d3:

http：// jsfiddle.net/j94RZ/

我想知道如何利用比例或轴来绘制一个网格（可能是矩形）我可以为每个网格的部分设置不同的背景颜色...所以我可以为网格的每个单元格交替颜色。我想要的网格绘制和约束由我的图形的轴，然后也适应，如果轴刻度线的间距改变（即轴变化像这样：http://bl.ocks.org/mbostock/1667367 ）。因此，如果我的图形有一个x轴的4个ticks和一个y轴的7 ticks，那么我的图形将有一个背景网格的7块高和4块宽。

I want to know how to utilize either the scale or axis allow me to draw a grid (of, presumably rectangles) where I can set a different background colour for each of the section of the grid...so I can alternate colours for each cell of the grid. I want the grid to be drawn and be constrained by the axes of my graph and then also adapt if the spacing of the axes ticks change (i.e. the axes changes like this: http://bl.ocks.org/mbostock/1667367). So if my graph has an x axis with 4 ticks and a y axis of 7 ticks then my graph will have a background grid that's 7 blocks high and 4 blocks wide.

I我们一直在使用一个范围，从零开始，以图的全宽结束，但我不知道什么值，我可以使用的步骤。有什么办法排序查询轴，并返回有多少刻度有？

I've been playing with the idea of using a range which starts at zero and ends at the full width of the graph but I don't know what value I can use for the step. Is there any way to sort of query the axis and return how many ticks there are?

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

推荐答案

接近解决方案。使用Ordinal范围带让我接近我想去的地方。

So after a few helpful comments above I've got close to a solution. Using Ordinal rangebands get me close to where I want to go.

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

I've created the range bands by using the number of ticks on my axis as a basis for the range of the input domain:

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

然后我尝试绘制矩形如下：

I've then tried drawing the rectangles out like so:

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

这给我想要的效果，但只有一行深：

This gets me the desired effect but for only one row deep:

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

我想，以某种方式绘制整个表格的绿色块（也不必硬编码在顺序量表域中的刻度量）。我试图然后应用范围带到y轴像这样（知道这不会真正工作，虽然） http ：//jsfiddle.net/Ny2FJ/3/

I want,somehow to draw the green blocks for the whole table (and also without having to hard code the amount of ticks in the ordinal scales domain). I tried to then apply the range bands to the y axis like so (knowing that this wouldn't really work though) 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循环来运行代码块在这个小调 http://jsfiddle.net/Ny2FJ/2/ 的y轴的每个刻度。

The only way I can think to do this is to introduce a for loop to run the block of code in this fiddle http://jsfiddle.net/Ny2FJ/2/ for each tick of the y axis.

这篇关于使用缩放绘制网格或矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！