如何保证旧数据在d3的退出选择中

Question

问题：

我试图从general update pattern 中了解 d3 退出选择的行为。

注意：我使用的是 d3V5

Fiddle

假设我想可视化数字“1”。

var data = [{id:"1"}];
var text = svg.selectAll('.text').data(data);

text.enter()
    .each((d) => console.log("first append " + d))
    .append('text')
    .text(d => d.id)

一切顺利。但现在说我厌倦了“1”，而对可视化“2”更感兴趣。

data = [{id:"2"}];
text = svg.selectAll('.text').data(data);

text.exit().each((d) => console.log("remove " + d)).remove();

控制台不记录{id:"1"}。此项目未放置在退出选择中。

text.enter()
    .each((d) => console.log("now append " + d))
    .append('text')
    .text(d => d.id)

现在我有一个“1”和一个“2”堆叠在一起。

假设：

我原以为当我这样做时，.data(data) d3 会在 dom 和数据之间进行比较，并将任何没有相应条目的旧 dom 节点放置在退出选择中的 data 中。我原以为数据上的'id' 字段可以区分这些数据元素。情况似乎并非如此。

问题：

如何在退出选择中获得{id:"1"}？

或者如何删除与{id:"1"}关联的dom节点？

Answer 1

这里的混乱始于一个错误的假设。在我见过的大多数 d3 示例中，数据具有以下格式：

[ {'id': 1, 'info': 'something'}, {'id': 2, 'info': 'something else'}, ...]

我一直假设 selection.data() 默认使用数据的 'id' 字段执行差异。

事实证明并非如此，您需要提供自己的关键功能。

来自D3's selection docs：

如果未指定键功能，则将 data 中的第一个数据分配给第一个选定元素，将第二个数据分配给第二个选定元素，依此类推。

所以我加了一个关键函数：

function idFunc(d) { return d ? d.id : this.id; }

var data = [{id:"1"}];
var text = svg.selectAll('text').data(data, idFunc);

text.enter()
    .append('text')
    .text(d => d.id)

然后，不再与数据数组中的项目相对应的 dom 节点找到了进入退出选择的方式，我能够将它们删除。

结论：

• （始终）在您.data(data, keyFunc) 时为您的数据定义一个关键函数