我有一些数据想使用 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)数据而不是布局/转换的东西。
最佳答案
这是我会做的: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
中的字段名称用于为每个给定行(子行)构建相应的单元格值数组。
关于javascript - 使用 D3 制作一组嵌套/分层表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17929695/