D3 v5堆叠面积图更新异常：新数据叠加而非替换旧数据

我仔细看了你的代码，核心问题在于plotArea函数里的enter/update/exit逻辑完全没有正确复用已有DOM元素，每次更新数据时都在新增g和path元素，旧的层自然就留在画布上叠加了。咱们来一步步拆解问题并修复：

原代码的关键错误点 #

• 更新模式（update=true）下，你直接对dataPath执行.data(stack(data)).enter().append('g')，但dataPath此时并没有和已有的.data-path元素绑定，等于每次都新增g元素
• 不管初始化还是更新，你都直接.append('path')，这会在每个g里不断新增path，旧的path根本没被移除或更新
• exit逻辑只处理了g元素，但更新时连g元素的绑定逻辑都错了，更别说里面的path

修正后的完整plotArea函数 #

function plotArea(update) {
  const stack = d3.stack()
    .keys(keys)
    .order(d3.stackOrderReverse);
  
  const area = startFromZero => {
    const highestVal = getHighestValueForYAxis();
    return d3.area()
      .x(d => graphAxes.x(d.data.interval))
      .y0(d => (startFromZero ? highestVal : graphAxes.y(d[0])))
      .y1(d => (startFromZero ? highestVal : graphAxes.y(d[1])));
  };

  // 统一初始化和更新的元素选择与数据绑定逻辑
  dataPath = svg.selectAll('.data-path')
    .data(stack(data));

  // 处理enter阶段：新增需要的g元素
  const enterG = dataPath.enter()
    .append('g')
    .attr('class', d => 'data-path type-' + d.key);

  // 为新增的g元素添加初始path
  enterG.append('path')
    .attr('class', 'area')
    .attr('d', area(true));

  // 合并enter和update集合，统一处理更新
  const mergedDataPath = dataPath.merge(enterG);

  // 更新已有/新增的path的属性，并执行过渡动画
  mergedDataPath.select('path.area')
    .transition()
    .delay(200)
    .duration(700)
    .attr('d', area(false));

  // 移除不再需要的g元素（及其内部的path）
  dataPath.exit().remove();
}

关键改动说明 #

• 统一数据绑定逻辑：不管是初始化还是更新，都先通过svg.selectAll('.data-path')选择已有元素，再绑定堆叠后的数据，这样enter/update/exit才能正确对应
• 分离enter和update处理：enter阶段只负责新增g和初始path，update阶段复用已有元素，通过merge把enter和update集合合并，统一做过渡动画
• 精准选择path元素：使用select('path.area')定位每个g里的单个path，不会重复新增，更新时直接修改已有path的d属性
• 正确的exit处理：移除exit的g元素时，内部的path也会跟着被移除，不会残留旧图层

这样修改后，更新数据时就会正确过渡到新的堆叠面积，旧图层会被移除，不会出现叠加的问题。

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