D3.js嵌套数组数据连接：如何正确分配key实现selectAll/enter/exit？

嗨，我完全懂你现在的困扰——其实你离正确答案只差一步！问题出在第二层数据连接时，你已经在正确获取父元素的子数据，但没给这个子数据连接加上key函数，导致D3只能用默认的索引匹配，更新时就会乱套。

先回顾下你的顶层数据连接为什么能正常工作：你给data()方法传了第二个参数（key函数），让D3用每个分类的d.key来跟踪元素，而不是依赖数组索引。这个逻辑完全可以复用在嵌套的子数据上。

正确的嵌套数据连接代码 #

直接修改你第二层的代码，给子数据的data()方法加上key函数就行：

// 顶层数据连接（你的原有代码，没问题）
var plot = d3.select('#plot');

var categories = plot.selectAll(".category")
    .data(data, function(d) { return d.key; })
    .enter().append("g")
    .attr("class", "category");

// 第二层数据连接（修正版，带key）
categories.selectAll(".bar")
    .data(function(d) { return d.value; }, function(d) { return d.key; }) // 这里是关键！
    .enter().append("rect")
    .attr("class", "bar")
    // 这里可以继续设置条形的位置、大小等属性，比如：
    // .attr("x", function(d, i) { /* 根据子分类计算x坐标 */ })
    // .attr("y", function(d) { /* 根据数值计算y坐标 */ })
    // .attr("width", barWidth)
    // .attr("height", function(d) { return d.value; });

为什么这样能行？ #

• 首先，categories是顶层每个分类对应的<g>元素集合，每个<g>已经绑定了顶层数据里的对象（比如{"key":"cat1", "value": [...]}）。
• 当你调用categories.selectAll(".bar").data(...)时，第一个参数function(d) { return d.value; }里的d就是当前父<g>绑定的数据，也就是该分类对应的子数组（比如[{"key":"subcatA",...}, {"key":"subcatB",...}]）。
• 第二个参数function(d) { return d.key; }就是子数据的key函数，告诉D3用子分类的key（subcatA/subcatB）来匹配元素，而不是默认的数组索引。这样不管子数据的顺序怎么变，D3都能准确找到对应的条形，更新时就不会出现混乱的动画了。

对比你之前的错误尝试 #

• 你第一次写的第二层代码没加key函数，D3只能用索引匹配，更新时容易出错；
• 第二次硬编码了data[0].value，只能处理第一个分类，而正确的方式是利用父元素绑定的数据，动态遍历所有分类的子数组。

这样修改后，你就能实现带key绑定的嵌套分组条形图，后续做数据更新（enter/update/exit模式）也会非常顺畅！

内容的提问来源于stack exchange，提问作者o1sound