d3.js构建矩形网格

我试图在d3.js中构建一个矩形网格

网格是7行（一周中的天）和24列（一天中的小时）

以下代码仅绘制（行：列）： 第0天：小时0， 第1天：小时1， 第2天：小时2， 第3天：小时3， 第4天：第4小时， 第5天：小时5， 第6天：第6小时， 第7天：小时7

问题：你知道为什么下面的代码不起作用吗

/**
*   calendarWeekHour    Setup a week-hour grid: 
*                           7 Rows (days), 24 Columns (hours)
*   @param id           div id tag starting with #
*   @param width        width of the grid in pixels
*   @param height       height of the grid in pixels
*   @param square       true/false if you want the height to 
*                           match the (calculated first) width
*/
function calendarWeekHour(id, width, height, square)
{
    var calData = randomData(width, height, square);
    var grid = d3.select(id).append("svg")
                    .attr("width", width)
                    .attr("height", height)
                    .attr("class", "chart");

        grid.selectAll("rect")
              .data(calData)
                .enter().append("svg:rect")
                 .attr("x", function(d, i) { return d[i].x; })
                 .attr("y", function(d, i) { return d[i].y; })
                 .attr("width", function(d, i) { return d[i].width; })
                 .attr("height", function(d, i) { return d[i].height; })
                 .on('mouseover', function() {
                    d3.select(this)
                        .style('fill', '#0F0');
                 })
                 .on('mouseout', function() {
                    d3.select(this)
                        .style('fill', '#FFF');
                 })
                 .on('click', function() {
                    console.log(d3.select(this));
                 })
                 .style("fill", '#FFF')
                 .style("stroke", '#555');
}

////////////////////////////////////////////////////////////////////////

/**
*   randomData()        returns an array: [
                                            [{id:value, ...}],
                                            [{id:value, ...}],
                                            [...],...,
                                            ];
                        ~ [
                            [hour1, hour2, hour3, ...],
                            [hour1, hour2, hour3, ...]
                          ]

*/
function randomData(gridWidth, gridHeight, square)
{
    var data = new Array();
    var gridItemWidth = gridWidth / 24;
    var gridItemHeight = (square) ? gridItemWidth : gridHeight / 7;
    var startX = gridItemWidth / 2;
    var startY = gridItemHeight / 2;
    var stepX = gridItemWidth;
    var stepY = gridItemHeight;
    var xpos = startX;
    var ypos = startY;
    var newValue = 0;
    var count = 0;

    for (var index_a = 0; index_a < 7; index_a++)
    {
        data.push(new Array());
        for (var index_b = 0; index_b < 24; index_b++)
        {
            newValue = Math.round(Math.random() * (100 - 1) + 1);
            data[index_a].push({ 
                                time: index_b, 
                                value: newValue,
                                width: gridItemWidth,
                                height: gridItemHeight,
                                x: xpos,
                                y: ypos,
                                count: count
                            });
            xpos += stepX;
            count += 1;
        }
        xpos = startX;
        ypos += stepY;
    }
    return data;
}

/**
*calendarWeekHour设置周时网格：
*7行（天），24列（小时）
*@param id div id标记以开头#
*@param宽度网格的宽度（像素）
*@param高度网格的高度（像素）
*@param square true/false，如果您希望高度
*匹配（先计算的）宽度
*/
功能日历Weekhour（id、宽度、高度、正方形）
{
var calData=随机数据（宽度、高度、平方）；
var grid=d3.select（id）.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（“类别”、“图表”）；
grid.selectAll（“rect”）
.数据（calData）
.enter（）.append（“svg:rect”）
.attr（“x”，函数（d，i）{返回d[i].x；}）
.attr（“y”，函数（d，i）{返回d[i].y；}）
.attr（“宽度”，函数（d，i）{返回d[i].width；}）
.attr（“height”，函数（d，i）{返回d[i].height；}）
.on（'mouseover'，function（）{
d3.选择（本）
.style（'fill'，'0F0'）；
})
.on（'mouseout'，function（）{
d3.选择（本）
.style（'fill'，'#FFF'）；
})
.on（'单击'，函数（））{
console.log（d3.select（this））；
})
.style（“填充”、“FFF”）
.style（“stroke”和“#555”）；
}
////////////////////////////////////////////////////////////////////////
/**
*randomData（）返回一个数组：[
[{id:value，…}]，
[{id:value，…}]，
[...],...,
];
~ [
[hour1，hour2，hour3，…]，
[hour1，hour2，hour3，…]
]
*/
函数随机数据（gridWidth、gridHeight、square）
{
var data=新数组（）；
var gridItemWidth=gridWidth/24；
变量gridItemHeight=（方形）？gridItemWidth:gridHeight/7；
var startX=gridItemWidth/2；
var startY=gridItemHeight/2；
var stepX=gridItemWidth；
var stepY=gridItemHeight；
var xpos=startX；
var ypos=startY；
var newValue=0；
var计数=0；
对于（var指数=0；指数<7；指数+a++）
{
data.push（新数组（））；
对于（var指数b=0；指数b<24；指数b++）
{
newValue=Math.round（Math.random（）*（100-1）+1）；
数据[index_a]。推送（{
时间:索引b,，
value:newValue，
宽度：gridItemWidth，
高度：gridItemHeight，
x:xpos，
y:ypos，
计数：计数
});
xpos+=stepX；
计数+=1；
}
xpos=startX；
ypos+=stepY；
}
返回数据；
}

问题在于，您的数据绑定只是迭代数组的第一个维度（0,1,2），而您正试图使用它迭代第二个维度（0,0）（0,1）（0,2），这导致了（0,0）（1,1）（2,2）行为

要获得想要的结果，只需使用subselect。从行定义开始：

var row = chart.selectAll(".row") 
    .data(data) // each row will be bound to the array at data[i]
  .enter().append("div") 
    .attr("class", "row") 
    … 

然后使用identity函数（作为数据属性）取消引用 每行的单元格：

var cell = row.selectAll(".cell") 
    .data(function(d) { return d; }) // then iterate through data[i] for each cell
  .enter().append("div") 
    .attr("class", "cell") 
    … 

您可以在上看到一个完整源代码的工作示例