d3.js crea una griglia di rettangoli

Question

Sto provando a creare una griglia di rettangoli in d3.js.

La griglia è composta da 7 righe (giorni in una settimana) e 24 colonne (ore in un giorno).

Il codice seguente disegna solo (riga: colonna): day0: hour0, day1: all'ora1, day2: hour2, giorno3: hour3, Day4: hour4, Giorno 5: hour5, Day6: hour6, day7: hour7

Domanda: Qualche motivo per cui il seguente codice non funzionerebbe?

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

Il problema è che la vostra associazione dati è iterazione solo attraverso la prima dimensione della matrice (0,1,2) e si sta cercando di usarlo per scorrere la seconda dimensione (0,0) (0 , 1) (0,2) che sta portando al comportamento (0,0) (1,1) (2,2).

Per ottenere i risultati desiderati, è sufficiente utilizzare una sottoselezione. Inizia con la definizione di riga:

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

quindi utilizzare la funzione di identità (come la proprietà dei dati) per dereferenziare le cellule per ogni riga:

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

si può vedere un esempio di lavoro con il sorgente completo a http://bl.ocks.org/2605010.