D3 data join的key怎样保持节点身份

我在做可排序的 D3 列表时，最容易误判的一点是：数组顺序变了，并不代表 DOM 节点必须换人。默认的 selection.data(data) 按位置匹配，插入、删除或排序后，原节点可能拿到另一条数据，于是颜色、过渡动画和节点上的临时状态看起来像“串了”。要保持节点身份，应把稳定且唯一的业务字段作为第二个参数传给 data：selection.data(data, d => d.id)。

官方地址：https://d3js.org/

先看没有 key 时节点为什么会漂移

假设列表首次渲染为 a、b、c，下一次排序变成 c、a、b。默认 data join 只看位置：第一个旧节点继续留在第一位，但它现在绑定了 c。如果这个节点之前保存了焦点、动画进度或局部交互状态，状态就会跟着位置走，而不是跟着业务对象走。

用稳定 id 让旧元素和新数据重新相认

key 函数会分别读取旧元素当前的数据和新数组中的数据，并把返回值当成匹配标识。第一次创建元素时，旧元素还没有绑定数据，因此通常要在函数里兼容“旧数据不存在”的情况；如果元素本身已经有可用的 data-id，也可以把它作为回退。

const rows = [
  { id: "c", label: "第三项", value: 30 },
  { id: "a", label: "第一项", value: 10 },
  { id: "b", label: "第二项", value: 20 }
];

const list = d3.select("#list");

// id 表示业务对象身份；不要用 index，因为排序后 index 会改变。
const joined = list.selectAll("li")
  .data(rows, d => d.id)
  .join(
    enter => enter.append("li").attr("class", "row"),
    update => update,
    exit => exit.remove() // 数据中消失的 id 才进入 exit。
  );

// enter 和 update 合并后的选择都能安全地更新可见内容。
joined.text(d => `${d.label}: ${d.value}`);

这里 c 原来存在于 DOM 中，即使它从第三位移动到第一位，也会继续使用原来的元素；真正新增的 id 才进入 enter，旧数据中不存在的 id 才进入 exit。这就是“保持节点身份”的核心。

key 函数要满足三个条件

第一，值要稳定：同一个业务对象在多次更新中应返回同样的 id。第二，值要唯一：同一批数据出现两个相同 key，会让重复数据进入 enter，旧元素的重复 key 则会进入 exit。第三，值要与对象身份相关：姓名、排序位置或格式化后的文本通常不适合作为唯一标识，因为它们可能被修改或重复。

如果元素首次进入时没有旧 datum，可以使用元素属性回退，但要避免让新数据和旧元素得到两套不一致的规则：

const selection = svg.selectAll("circle")
  .data(points, function (d) {
    // 旧元素可能没有 d；首次绑定时用 DOM 上的 data-id 兜底。
    return d ? d.id : this.getAttribute("data-id");
  })
  .join("circle")
  .attr("data-id", d => d.id)
  .attr("cx", d => d.x)
  .attr("cy", d => d.y);

// key 只解决身份匹配；顺序调整交给 order，避免把两件事混在一起。
selection.order();

身份稳定后仍要处理顺序和边界

key 函数不等于排序函数。D3 文档说明，使用 key 后，update 和 enter 选择按数据顺序返回，但 DOM 中已有元素的顺序可能还保留原样；需要让视觉顺序跟随数据时，再显式调用 order() 或 sort()。这一步尤其重要于 SVG 图例、可排序列表和带过渡的散点图。

最后用一个判断确认是否选对了 key

更新前先记录某个 DOM 节点与业务 id 的关系，再交换数据顺序。如果同一个 id 仍然落在同一个节点对象上，说明身份匹配成功；如果只是文字变了但节点对象没有复用，通常是 key 不稳定、重复，或选择范围已经换了。实际项目里，把 id 作为数据契约的一部分，并把 order() 单独放在排序逻辑之后，最容易维护。

常见问题

key 可以直接用数组下标吗？ 不建议。只有数据永远不插入、不删除、不排序时，下标才可能暂时等价于身份；可变列表应使用稳定 id。

key 相同会怎样？ D3 会把重复的旧元素放入 exit，把重复的新数据放入 enter，因此应先修复数据唯一性，而不是依赖 join 猜测。

key 能自动改变 DOM 顺序吗？ 不能把它当作排序 API。匹配完成后，按需要调用 selection.order() 或 selection.sort()。