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

Question

我有一些数据想使用 d3 在 html 表中显示。我的数据布局如下:

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

最终，我想要在风格/功能上类似于 this example 的东西，用户可以在其中单击“foo”行并查看“foo”组中的所有内容。但现在我根本无法显示数据。

我做了一点jsfiddle显示我现在的位置。如您所见，到目前为止，我未能成功展示我数据中的任何实际数字。有没有人对我应该如何去做有任何想法？我应该重组数据集吗？谢谢

== 编辑 ==

我必须道歉，因为我可能对我正在尝试做的事情含糊不清。这是一个mock up我最终想要实现的目标，虽然我强调这个问题更多的是关于绑定(bind)数据而不是布局/转换的东西。

Answer 1

这是我会做的:http://jsfiddle.net/j43Nb/

查看您的数据，每个父项有一张表，每个子项有一行似乎更合适，而不是将整个数据包在一张大表中。如果你真的需要一张大表，只需将 div.section/h4 位替换为另一个 table/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 中的字段名称用于为每个给定行(子行)构建相应的单元格值数组。