d3.js構建一個矩形網格

我想在d3.js中構建一個矩形網格。d3.js構建一個矩形網格

網格爲7行（一週中的天數）和24列（一天中的小時數）。

以下代碼僅汲取（行：列）： day0：hour0， DAY1：hour1， DAY2：hour2，第3天：hour3，第四天：hour4， DAY5：hour5，第六天：hour6，第7天：hour7

問：任何想法，爲什麼下面的代碼將無法正常工作？

/** 
* 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; 
}

來源

2012-05-04 August

的問題是，你的綁定僅通過陣列（0,1,2）的第一維迭代，你要使用它通過第二個維度（0,0）迭代（0 ，1）（0,2）導致（0,0）（1,1）（2,2）行爲。

要獲得您想要的結果，只需使用子選擇。你行定義的地方開始：

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

然後使用標識功能（如數據屬性）取消引用細胞的每一行：

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

你可以看到完整的源代碼在一個工作示例http://bl.ocks.org/2605010。

來源

2012-05-05 19:56:37 Bill

d3.js構建一個矩形網格

回答

相關問題