1

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

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

最终，我希望在样式/功能上与此示例类似，用户可以单击“foo”行并查看“foo”组中的所有内容。但现在我正在努力显示数据。

我做了一个小jsfiddle来展示我现在的位置。如您所见，到目前为止，我未能从我的数据中显示任何实际数字。有人对我应该如何处理有任何想法吗？我应该重组dataset吗？谢谢

== 编辑 ==

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

4

1 回答 1

2

这就是我要做的：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用于为每个给定行（子行）构建相应的单元格值数组。

于 2013-07-29T20:25:03.213 回答