Javascript 如何保证旧数据在d3'；s退出选择 问题:

我试图了解d3的退出选择行为

注意：我使用的是d3V5

假设我想想象数字“1”

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

控制台不记录

{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节点？

这里的混淆源于错误的假设。在我看到的大多数d3示例中，数据的格式如下：

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

我一直假设selection.data（）在默认情况下使用数据的

'id'

字段执行了一个diff。

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

发件人：

如果未指定关键功能，则数据中的第一个基准将指定给第一个选定图元，第二个基准将指定给第二个选定图元，依此类推

因此，我添加了一个关键函数：

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）

---

您只是缺少

data

方法中的键函数，仅此而已。这肯定是复制品，我很快就会找到目标的。哦。我假设d3中默认使用

'id'

属性作为键。我仍然无法修复我的小提琴与一个关键的功能，但。。。也许我只是做错了。@Gerardofutado仍然无法在小提琴上使用关键功能。想试一试吗？你试过

data（data，d=>d.id）

？如果不使用键函数，默认情况下使用数组中的索引（这两个示例都是

0

）@AlexLenail对不起，我以前在手机上，现在在电脑上，更容易阅读代码。这里的问题不是缺少一个键函数（但有一个键函数总是很有趣），这里的问题是选择了一个不存在的类（

.text

）。实际上，你只是选择了什么都没有（阅读我的）。下面是相同的代码，按标签选择：恐怕你在结论中的第二点是完全错误的。这与您遇到的问题无关：您不需要设置

id

属性或任何其他属性。正如我在评论中解释的，您遇到的问题只是一个选择问题（您选择的是不存在的东西）。在这种情况下，

idFunc（d）{return d？d.id:this.id；}

中建议使用三元的原因是什么？它什么时候转到第二个分支，什么是

this

？

.data（data，function（d）{return d？d.name:this.id；}）

，这只是为了检查数据的存在。这和我的评论有什么关系？您不需要在元素中设置任何

id

属性，退出/进入选择仅基于基准工作。这很清楚：尽管如此，我有一种强烈的感觉，你写的答案是为了你的真实代码，而不是你在这里发布的问题。在您的实际代码中，页面中可能已经有DOM元素，这就是为什么您需要一个三元组，该三元组具有用于缺少数据的回退，并且元素具有ID。但是，在您这里的问题中，您没有以前存在的DOM元素，所有内容都是通过enter选择创建的。因此，您不需要设置ID。再次，我建议您更改答案，或删除整个Q/A对，因为您的答案完全是错误的和误导性的。

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

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)