d3.js長方形のグリッドを構築する

Question

d3.jsに長方形のグリッドを作成しようとしています。

グリッドは7行（1週間の曜日）、24列（1日の時間）です。

次のコードのみ（：カラム行）：描画 day0：hour0、 1日目：hour1、 2日目：hour2、 3日目：hour3、 day4：hour4、 day5：hour5、 day6：hour6、 日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; 
} 

Answer 1

問題は0あなたのデータバインディングが唯一の配列（0,1,2）の最初の次元を反復されていて、二次元（0,0）（を反復処理するためにそれを使用しようとしているということです、（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。