如何处理D3中嵌套的多级数据？

Question

我有如下的数据结构

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

我看到了处理两层嵌套的示例，可以按照它们来处理数据。我只需要为每个具有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});

我希望画三排矩形。在这段代码中，前两行显示正确，但第三行根本不显示。我在javascript控制台中查看，看起来第三行矩形被附加到第二行矩形的标题中。希望这有助于显示我在这里所问的问题。这是我应该在这里循环的方式，还是有更好的方法呢？

Answer 1

也许您可以使用类似@nautat发布的递归解决方案来回答我关于使用d3？https://stackoverflow.com/a/13412059/658053嵌套HTML表的问题。一旦我有了进行递归的要点，我就能够修改它以适应我的实际数据和规范。

诀窍是对某些条件执行.filter，然后对匹配筛选器的单元格执行.call递归函数，或者处理与不同类型筛选器匹配的项的基本大小写。

祝好运!