Simple grid

Example of accessing parent data

HTML

<script src="http://mbostock.github.com/d3/d3.js"></script>

CSS

.cell{
    fill:white;
    stroke:silver;
}
svg{
    padding: 10px           
}

JavaScript

// Accessing parent data

var dataNum = 3,
    data = d3.range(dataNum).map(function(d, i){
    return d3.range(dataNum).map(function(d2, i2){return i*dataNum+i2})});

var w = 200,
    h = 200,
    cellW = w / data.length,
    cellH = 200 / data[0].length,
    cellX = function(d, i){return i / data.length * w;},
    rowTransform = function(d, i){return 'translate(0,'+(cellH*i)+')'};

var table1 = d3.select("body")
    .append("svg")
    .attr({width: w, height: h})
    .selectAll("g.row")
    .data(data)
  .enter().append("g")
    .attr({class: 'row', transform: rowTransform});
                                  
table1.selectAll("rect.cell")
    .data(function(d, i){return d;})
  .enter().append("rect")
    .attr({class: 'cell', width: cellW, height: cellH, x: cellX});
                                  
table1.selectAll("text.value")
    .data(function(d, i){return d;})
  .enter().append("text")
    .attr({class: 'value', x: cellX, dy: '1em'})
    .text(function(d, i, j){
        console.log('Method A: Parent data: ', data[j], 'Parent index: ', j);
        console.log('Method B: Parent data: ', this.parentNode.__data__);                                  
        return d;
     });
                                  
var table2 = d3.select("body")
    .append("svg")
    .attr({width: w, height: h})
    .selectAll("g.row")
    .data(data)
  .enter().append("g")
    .attr({class: 'row', transform: rowTransform})
    .each(function(parentD, parentI){   
        
        var node = d3.select(this);
        node.selectAll("rect.cell")
            .data(function(d, i){return d;})
          .enter().append("rect")
            .attr({class: 'cell', width: cellW, height: cellH, x: cellX});
                                          
        node.selectAll("text.value")
            .data(function(d, i){return d;})
          .enter().append("text")
            .attr({class: 'value', x: cellX, dy: '1em'})
            .text(function(d, i){
                console.log('Method C:...