5

次のデータ構造があります

 { key: 'a', 
   values: { key: 'a0', 
             values: { key: 'a00',
                       values: {...}
                     },
                     { key: 'a01',
                       values: {...}
                     }
           },
           { key: 'a1', 
             values: {...}
           }
 }, 
 { key: 'b',
   values: {...}
 }

2 レベルのネスティングを処理する例を見て、それらに従ってデータを処理できます。key プロパティを使用して各要素の長方形を描画し、そのオブジェクトの他のプロパティに基づいてその色と位置を決定するだけです。ここに私がやりたいことに近いサンプルコードがあります

var data = [
    {
        key : 'dept1',
        values : [
            {
                key : 'group-1-1',
                values : [
                    {
                        key : 'emp-1-1-1',
                        salary : 10000
                    },
                    {
                        key : 'emp-1-1-2',
                        salary : 20000
                    },
                    {
                        key : 'emp-1-1-3',
                        salary : 30000
                    },
                    {
                        key : 'emp-1-1-4',
                        salary : 40000
                    }
                ]
            },
            {
                key : 'group-1-2',
                values : [
                    {
                        key : 'emp-1-2-1',
                        salary : 10000
                    },
                    {
                        key : 'emp-1-2-2',
                        salary : 20000
                    },
                    {
                        key : 'emp-1-2-3',
                        salary : 30000
                    },
                    {
                        key : 'emp-1-2-4',
                        salary : 40000
                    }
                ]
            }
        ]
    },
    {
        key : 'dept2',
        values : [
            {
                key : 'group-2-1',
                values : [
                    {
                        key : 'emp-2-1-1',
                        salary : 10000
                    },
                    {
                        key : 'emp-2-1-2',
                        salary : 20000
                    },
                    {
                        key : 'emp-2-1-3',
                        salary : 30000
                    },
                    {
                        key : 'emp-2-1-4',
                        salary : 40000
                    }
                ]
            },
            {
                key : 'group-2-2',
                values : [
                    {
                        key : 'emp-2-2-1',
                        salary : 10000
                    },
                    {
                        key : 'emp-2-2-2',
                        salary : 20000
                    },
                    {
                        key : 'emp-2-2-3',
                        salary : 30000
                    },
                    {
                        key : 'emp-2-2-4',
                        salary : 40000
                    }
                ]
            }
        ]
    },
    {
        key : 'dept3',
        values : [
            {
                key : 'group-3-1',
                values : [
                    {
                        key : 'emp-3-1-1',
                        salary : 10000
                    },
                    {
                        key : 'emp-3-1-2',
                        salary : 20000
                    },
                    {
                        key : 'emp-3-1-3',
                        salary : 30000
                    },
                    {
                        key : 'emp-3-1-4',
                        salary : 40000
                    }
                ]
            },
            {
                key : 'group-3-2',
                values : [
                    {
                        key : 'emp-3-2-1',
                        salary : 10000
                    },
                    {
                        key : 'emp-3-2-2',
                        salary : 20000
                    },
                    {
                        key : 'emp-3-2-3',
                        salary : 30000
                    },
                    {
                        key : 'emp-3-2-4',
                        salary : 40000
                    }
                ]
            }

        ]
    }
];

var svg = d3.select("body").append("svg").attr("width", "100%").attr("height", "100%");

var width = 200, height = 20, gap = 4, space = width + 2 * gap;

var sel = svg.selectAll("g").data(data).enter()
    .append("g")
    .attr("transform", function(d, i) {return 'translate(' + space * i + ', 0)'});

sel.append("rect").attr("x", gap).attr('y', gap).attr('width', width).attr('height', height)
    .attr('fill', 'green')
    .append('title').text(function(d) {return d.key});

var width1 = width/2 - gap;

var sel1 = sel.selectAll('g').data(function(d) {return d.values}).enter()
    .append('rect')
    .attr('x', function(p, i) {return gap + i * (width1+gap)}).attr('y', 2*gap + height)
    .attr('width', width1).attr('height', height)
    .attr('fill', 'blue')
    .append('title').text(function(p) {return p.key});

var width1 = width/4 - 3 * gap;

var sel2 = sel1.selectAll('g').data(function(d) {return d.values}).enter()
    .append('rect').text(function(k) {return k.key})
    .attr('x', function(p, i) {return gap + i * width1}).attr('y', 3*gap + 2*height)
    .attr('width', width1).attr('height', height)
    .attr('fill', 'cyan')
    .append('title').text(function(p) {return p.key});

3行の長方形を描くことを期待しています。このコードでは、最初の 2 行は正しく表示されますが、3 行目はまったく表示されません。JavaScript コンソールを調べたところ、2 行目の四角形のタイトルに 3 行目の四角形が追加されているようです。これが私がここで求めていることを示すのに役立つことを願っています. これは私がここでループするべき方法ですか、それとももっと良い方法がありますか?

4

1 に答える 1

2

おそらく、d3 でネストされた HTML テーブルに関する私の質問に答えるために @nautat が投稿したものと同様の再帰的ソリューションを使用できますか? https://stackoverflow.com/a/13412059/658053再帰を行う要点を理解したら、実際のデータと仕様に合わせて変更することができました。

トリックは、.filterある条件で実行.callし、フィルターに一致するセルで再帰関数を実行するか、別の種類のフィルターに一致するアイテムの基本ケースを処理することです。

幸運を！

于 2012-11-26T17:17:31.410 に答える