javascript - 使用D3制作一组嵌套/分层的表

我有一些要使用d3在html表中显示的数据。我的数据是这样布置的：

var dataset = [
    {
        'name': 'foo',
        'children': [
            {
                'var1': 'hello',
                'var2': 87,
                ...
            },
            {...},
            {...}
        ]
    },
    {
        'name': 'bar',
        'children': [
            {
                'var1': 'howdy',
                ...
            },
            {...},
        ]
    },
    {
        // and so on...
    }
]

最终，我希望具有与this example类似的样式/功能，用户可以在其中单击'foo'行并查看'foo'组中的所有内容。但是目前，我一直在努力显示所有数据。

我做了一些jsfiddle来显示我现在的位置。如您所见，到目前为止，我无法显示数据中的任何实际数字。有人对我应该怎么做有任何想法吗？我应该重组dataset吗？谢谢

==编辑==

我可能对我想做的事情含糊其词表示歉意。这是我最终要实现的目标的mock up，尽管我强调说，这个问题更多的是关于绑定数据，而不是布局/转换。

最佳答案

这就是我要做的：http://jsfiddle.net/j43Nb/

查看您的数据，似乎更合适的是每个父级有一个表，每个子级有一个行，而不是将整个内容包装在一个大表中。如果您确实需要一个大表，只需将div.section / h4位替换为另一个表/ tr / td序列即可。

最后一点是了解“子”对象如何变成单元数据数组的关键：

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];
        })
    });

其中cols中的字段名称用于为每个给定的行（子级）构建对应的单元格值数组。