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

Question

我有以下数据结构

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

我看到了处理两级嵌套的示例,可以按照它们来处理数据.我只需要为每个元素绘制带有键属性的矩形,并根据该对象的其他一些属性确定其颜色和位置.这是接近我想要做的示例代码

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 嵌套 HTML 表的问题？/sf/answers/938844161/一旦我掌握了递归的要点，我就能够修改它以适应我的实际数据和规格。

诀窍是，您.filter在某些条件下执行 a 操作，并且.call对与过滤器匹配的单元格执行递归函数，或者处理与不同类型过滤器匹配的项目的基本情况。

祝你好运！