D3.js中exit().remove()无效及滑块切换日期首条形不重绘问题

嘿，我仔细看了你的代码问题，这两个困扰你的问题根源其实是同一个——没有为数据绑定设置正确的键函数（Key Function），这可是D3数据绑定环节里非常容易踩的坑！

问题1：exit().remove()无法移除第一个条形 #

当你调用.data(data)而不指定键函数时，D3默认会用数组索引来匹配DOM元素和数据项。比如当你的数据数组长度减少时，D3会认为索引为0的元素始终存在，不会将它放入exit集合中，自然也就无法通过.remove()删掉它。

问题2：切换日期时id为54042的条形不重绘 #

同样是索引匹配的锅：当你切换日期加载新数据时，新数据里id为54042的项在数组中的位置可能发生了变化。D3用索引匹配的话，会把原来第一个位置的DOM元素绑定到新数据第一个位置的项，而不是根据唯一的id去匹配对应的DOM元素。这就导致原本属于54042的DOM元素被绑定了其他数据，不会触发重绘，而其他位置匹配的元素则能正常更新。

解决方案：添加键函数 #

只需要在数据绑定的时候，给.data()方法加上第二个参数——键函数，用数据中唯一的标识（比如你的id字段）来精准匹配DOM元素和数据项：

// 在你的update函数里，修改数据绑定的代码
var bars = svg.selectAll(".bar")
    .data(data, d => d.id); // 用唯一id作为匹配依据，代替默认的索引匹配

这样修改后，D3会完全根据每个数据项的id来关联对应的DOM元素：

• 当数据减少时，所有没有对应数据的DOM元素都会被纳入exit集合，调用.exit().remove()就能正确移除它们；
• 切换日期加载新数据时，每个DOM元素都会找到对应id的数据项进行更新，不管数据在数组中的位置如何变化，id为54042的条形也能正常重绘了。

额外提示 #

键函数的核心作用是建立DOM元素与数据项的唯一关联，避免依赖数组顺序。只要数据中有唯一标识（id、唯一名称等），都应该优先使用键函数来做数据绑定，这能避免绝大多数enter/update/exit阶段的匹配错误。

内容的提问来源于stack exchange，提问作者fall16mis