D3数据更新时g元素行为异常及数据绑定方式疑问

背景 #

这是一个展示动感单车课程座位数据的图表，按座位号升序排列，DOM结构如下：

<svg>
  <g class="seat_0">
    <rect class="bar"></rect>
    <text class="measurement"></text>
  </g>
  <g class="seat_1">
    <rect class="bar"></rect>
    <text class="measurement"></text>
  </g>
  ...
  <g class="seat_n">
    <rect class="bar"></rect>
    <text class="measurement"></text>
  </g>
</svg>

每个座位分组包含条形（rect.bar）和文本（text.measurement），初始读取d.total_power数据，通过下拉菜单切换指标时，条形宽度和文本内容需同步更新。

问题现象 #

对比两种数据绑定方式（唯一差异），均出现异常：

• 使用.data(data, d => d)绑定整个对象时：切换下拉选项后，仅第一个条形被更新，其余全部被追加（橙色为新追加元素，红色为更新元素），且仅第一个座位定位异常。
• 使用.data(data, d => d[input])绑定当前选中指标的数值时：
  • 选择「Total power」「Total calories」时，部分座位元素被追加而非过渡更新（对应座位分别为31、43、44、47、51和29、35、51）；
  • 选择「Average speed」「Total distance」时无异常。

核心疑问与解答 #

疑问1：为何部分条形的追加/更新行为不符合预期？ #

D3的通用更新模式完全依赖**键函数（key function）**匹配新旧数据：只有当键函数返回的值在新旧数据中完全匹配时，对应DOM元素才会被更新；不匹配的元素会被标记为移除或追加。

针对.data(data, d => d[input])的异常

问题根源是键值重复：当选择「Total power」或「Total calories」时，存在多个座位的该指标数值完全相同。D3要求键函数返回值具有唯一性——如果多个数据项的键值重复，D3无法准确匹配新旧数据对应的DOM元素，会将部分元素错误判定为“新数据”进行追加，而非更新已有元素。

而「Average speed」「Total distance」的数值无重复（或重复项未触发匹配冲突），键函数能准确匹配，因此更新行为正常。

针对.data(data, d => d)的异常

直接将整个对象作为键值时，D3通过对象引用判断匹配。切换下拉选项时，新数据数组的对象是新引用（即使属性值和旧数据一致），因此除第一个元素可能因巧合匹配外，其余旧数据的对象引用都和新数据不匹配，D3会将旧元素标记为移除，全部新元素被追加。

疑问2：为何.data(d => d)绑定整个对象时全追加，而.data(d => d[input])能部分更新？ #

• .data(data, d => d)的键是对象引用：每次切换指标时，新数据对象与旧数据对象引用不同，D3判定所有数据为新数据，因此追加全部元素（仅第一个可能特殊）。
• .data(data, d => d[input])的键是指标数值：当数值唯一时，D3可通过数值匹配新旧数据对应的DOM元素，实现正常更新；仅当数值重复时，才会出现匹配失败导致的追加异常。

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