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来展示我现在的位置。如您所见，到目前为止，我没有成功显示数据中的任何实际数字。有没有人对我应该怎么做呢？我应该重组dataset吗？谢谢

==编辑==

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

Answer 1

以下是我要做的事：http://jsfiddle.net/j43Nb/

查看您的数据，似乎更合适的是每个父项有一个表，每个子项有一行，而不是将整个事物包装在一个大表中。如果你真的需要一个大表，只需用另一个table / tr / td序列替换div.section / h4位。

理解“子”对象如何成为单元数据数组的关键在于最后：

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中的字段名称用于为每个给定行（子）构建相应的单元格值数组。

使用D3制作嵌套/分层的表集

1 个答案: