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/

データを見ると、すべてを 1 つの大きなテーブルにラップするのではなく、親ごとに 1 つのテーブル、子ごとに 1 つの行を持つ方が適切に思えます。本当に 1 つの大きなテーブルが必要な場合は、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 に答える