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

问题描述

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

I have some data which I want to display in html tables using d3. My data is laid out like this:

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

最终，我希望在样式/功能上类似于此示例，其中用户可以单击"foo"行并查看"foo"组中的所有内容.但是目前，我一直在努力显示所有数据.

Ultimately, I would like to have something similar in style/functionality to this example, where the user can click on the 'foo' row and see everything in the 'foo' group. But for now I'm struggling to display the data at all.

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

I've made a little jsfiddle to show where I am now. As you can see, I have so far been unsuccessful at showing any of the actual numbers from my data. Does anyone have any ideas on how I should go about this? Should I restructure dataset? Thank you

==编辑==

我可能对自己想做的事情含糊不清表示歉意.这是我最终想要实现的目标的模拟，尽管我强调，这个问题更多的是关于绑定数据而不是绑定数据.布局/过渡的东西.

I must apologise for maybe being vague about what I'm trying to do. Here is a mock up of what I ultimately want to achieve, although I stress that this question is more about binding data than layout/transition stuff.

推荐答案

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

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

Looking at your data, it seems more appropriate to have one table per parent and one row per child, and not wrap the whole thing in one big table. If you really need one big table, just replace the div.section/h4 bits with another table/tr/td sequence.

最后一点是了解子"对象如何成为单元数据数组的关键:

The key to understanding how "child" objects become an array of cell data is in this bit at the end:

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中的字段名称用于为每个给定的行(子级)构建对应的单元格值数组.

where the field names in cols are used to build a corresponding array of cell values for each given row (child).

这篇关于使用D3制作一组嵌套/分层的表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！