Making A Nested/hierarchical Set Of Tables Using D3

I have some data which I want to display in html tables using d3. My data is laid out like this: var dataset = [ { 'name': 'foo', 'children': [ {

Solution 1:

Here's what I would do: http://jsfiddle.net/j43Nb/

Looking at your data, it seems more appropriate to have one table per parent and one row per child, and not wrap the whole thing in one big table. If you really need one big table, just replace the div.section/h4 bits with another table/tr/td sequence.

The key to understanding how "child" objects become an array of cell data is in this bit at the end:

var cells = rows.selectAll('td')
    .data(function(d) {
        // return cell data as an array of prop values, 
        // ordered according to prop names in cols
        return cols.map(function(prop) {
            return d[prop];
        })
    });

where the field names in cols are used to build a corresponding array of cell values for each given row (child).