Javascript 如何使用D3中的对象获得可靠的数据更新？

我正在为D3.js中的数据更新而挣扎。当数据由像

var data=[1,2,3,4,5]

这样的简单数组组成时，一切都按预期进行，但如果我尝试使用像

var data=[{I:1，d:a}，{I:1，d:a}]

这样的对象数组，则会得到不可靠的更新。下面是一个在浏览器中开箱即用的示例（如果您将其存储并称为html页面）：

函数随机字母（）{
//看https://devdocs.io/d3~6/d3阵列#洗牌
// https://devdocs.io/d3~6/d3数组#排序
变量数组=d3
.洗牌([
{d:“1”，t:“h”}，
{d:“2”，t:“g”}，
{d:“3”，t:“f”}，
{d:“4”，t:“e”}，
{d:“5”，t:“d”}，
{d:“6”，t:“c”}，
{d:“7”，t:“b”}，
{d:“8”，t:“a”}，
])
.slice（0,4）
.排序（（a，b）=>d3.升序（a.t，b.t））；
var result=array.slice（0）；//复制
返回结果；
}
函数更新（）{
var llist=d3。选择（“列表”）；
数据=随机字母（）；
日志（“新数据：”）；
控制台日志（数据）；
利斯特
.selectAll（“li”）
//如果没有键功能，数据将无法正确排序
.数据（数据、功能（d）{
d？d.d：这个id；
})
.加入(
（输入）=>{
enter.each（（d）=>console.log（“enter:，d））；
进入
.附加（“li”）
.text（（d）=>d.d）
.attr（“id”，（d）=>d.d）；
},
（更新）=>{
update.each（（d）=>console.log（“更新：，d））；
},
（退出）=>{
exit.each（（d）=>console.log（“exit:，d））；
exit.remove（）；
}
);
}
数据=随机字母（）；
setInterval（（）=>update（），1000）

文件标题

以下是正确使用D3进入/退出模式的示例：


函数随机字母（）{
返回d3.shuffle([
{d:“1”，t:“h”}，
{d:“2”，t:“g”}，
{d:“3”，t:“f”}，
{d:“4”，t:“e”}，
{d:“5”，t:“d”}，
{d:“6”，t:“c”}，
{d:“7”，t:“b”}，
{d:“8”，t:“a”}，
])
.slice（0,4）
.排序（（a，b）=>d3.升序（a.t，b.t））；
}
函数更新（）{
const-llist=d3.选择（“列表”）；
常量数据=随机字母（）；
const entries=llist.selectAll（“li”）
.数据（数据，d=>d.d）；
const newEntries=entries.enter（）
.append（'li'）
.text（d=>d.t）；
常量颜色=[“红色”、“橙色”、“绿色”、“蓝色”]
newEntries.merge（条目）
.style（'颜色'，（d，i）=>颜色[i]）；
entries.exit（）.remove（）；
}
setInterval（（）=>update（），1000）

文件标题

问题中的代码在
.data（）
的键函数中包含一个错误：没有返回值。虽然我真的不知道这是如何工作的，但如果改为使用此键功能，它将正常工作：

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

因此，只有
返回
丢失。
否决票可能是由于您对正确使用进入/退出模式的评论造成的。我在示例中使用的
.join（）
是在D3的v6中引入的（请参阅）。我对您的示例进行了向上投票，我可以将其与我的代码进行比较，最终发现我的错误-示例中提供的键函数缺少返回：-（我将您的编辑部分回滚到上一个版本，因为您将自答的解决方案编辑到了问题中。