Javascript 理解D3数据绑定密钥访问器

我是D3新手，我正在做一个简单的例子，试图了解数据绑定是如何工作的

基本上我有一个颜色数组，一个用于添加颜色的函数和一个从索引中删除颜色的函数。 不起作用的是删除操作。 如果我将0设置为要删除的索引，我会看到D3将最后一个元素设置为要删除的元素。如果我使用密钥访问器

d=>d

，它可以工作。 我有很多问题

这是我的代码：

const数据={
颜色：[“黑色”、“白色”、“棕色”]，
添加颜色（颜色）{
这个。颜色。推（颜色）；
},
removeColorByIndex（索引）{
这个.颜色.拼接（索引，1）；
}
};
const root=d3。选择（“根”）；
const bars container=d3.选择（“#bars container”）；
const addButton=d3。选择（“添加按钮”）；
const removeButton=d3。选择（“删除按钮”）；
addButton.on（“单击”，（）=>{
const newColor=d3.选择（“#颜色输入”）.node（）.value；
data.addColor（newColor）；
更新（）；
});
移除按钮。在（“单击”，（）=>{
const index=d3。选择（#索引输入“）.node（）.value；
数据。removeColorByIndex（索引）；
更新（）；
});
函数更新（）{
酒吧容器
.selectAll（“div”）
.数据（数据.国家，（d，i）=>{
log（{i，d}）；
返回i；
})
.加入(
（输入）=>{
console.log（“输入：”，输入）；
回车
.附加（“div”）
.text（（d）=>d）
.classed（“bar”，真）
.已分类（“添加”，真实）；
},
（更新）=>{
日志（“更新：”，更新）；
返回update.classed（“update”，true）；
},
（退出）=>{
console.log（“退出：”，退出）；
返回出口。分类（“移除”，真）；
}
);
console.log（“divs”，barsContainer.selectAll（“div”）[“u groups”][0]）；
}
更新（）
.bar{
保证金：5px0px 5px0px；
最大宽度：200px；
填充：10px；
}
.添加了{背景色：浅绿色；}
.update{背景色：矢车菊蓝；}
.删除{背景色：番茄；}

添加颜色
按索引删除颜色

如果我尝试删除索引为0的条，最后一条条变成红色[退出]，而不是第一条，为什么

键函数返回的标识符既不存储在DOM节点上，也不存储在数据上。每次使用
.data（）
时都会对其进行评估。每次使用
.data（）
时，将为选择中的每个节点计算键函数（如果提供的话）（使用绑定的数据
。\uuuuuu data\uuuuuu
，它表示数据数组中的一个项目），然后D3迭代数据数组以找到与节点匹配的数据。如果未找到匹配节点，则会将节点添加到具有该基准的enter选择中。如果在匹配所有数据后，有多余的节点，则这些节点将退出

您的关键功能是
（d，i）=>i
——通过删除数据数组中的第一个项，数据数组中仍有一个索引为0的项。索引为0的数据数组项与选择中的第0个节点匹配。因此第一个节点无法退出：它在数据数组中仍有一个对应的项

给定键函数：这意味着最初位于索引1并与索引1处的节点配对的数据现在是索引0处的数据（拼接后），并将与索引0处的节点配对

由于数据数组比原来短了一项，因此DOM中有一个多余的节点。最后一个节点的索引最高，没有匹配的数据数组项，因此退出最后一个节点。除最后一个节点外的所有节点都在更新选择中

通常，您会使用一个键函数来引用数据本身，而不是它的位置/索引（因为这可能会由于排序或其他因素而改变，这将改变哪个数据绑定到哪个节点）。因此，如果您的数据由唯一的颜色名称组成，您应该使用：
.data（data，d=>d）
（注意：如果d是一个对象，则键函数应该返回一个字符串）。这样，无论索引如何，相同的数据都将配对到相同的节点。因此，从阵列中拼接数据将删除其绑定到的相应节点

我创建了两个可视化键函数的尝试，一个是基于数据的键，另一个是基于索引的键。当索引键用于匹配基准面和图元时，如果仔细观察，绑定到图元的基准面将发生变化：索引键独立于基准面



bl.ock有点粗糙，我可能会在这里调整并合并到答案正文中。
谢谢你，安德鲁，但仍然不清楚。每次使用.data（）时，您的意思是什么？键函数（如果提供）将针对选择中的每个节点进行求值（使用绑定的数据。_data__，它表示数据数组中的一个项），然后D3遍历数据数组以找到与节点匹配的数据。？也许有些片段可以help@whitecircle，将通过一个可视片段来澄清，但可能需要一两天的时间。@whitecircle-我没有忘记，正如我所说的，我有点忙。我已经添加了几个bl.ocks帮助的链接，这些链接应该/可能有助于可视化关键功能，尽管我对可能需要改进的地方有一些想法。