d3.js使用selection.join做多过渡链时如何合并enter与update过渡

解决方案 #

核心逻辑是利用selection.join()返回enter新增元素+update现有元素合并选择集的特性，将过渡逻辑从update回调中抽离到join外部，保证两类元素都能应用过渡效果。

修改后代码如下：

const transitions = [];

const allGroups = svg
  .selectAll('g')
  .data(someData)
  .join(
    (enter) => {
      const gEnter = enter.append('g');
      // enter阶段仅完成元素创建、过渡起始状态赋值
      gEnter.attr('your-g-attr', 初始值)
        .append('rect')
        .attr('your-rect-attr', 初始值);
      // 可继续追加其他需要的元素
      gEnter.append('circle');
      return gEnter;
    }
    // 无需单独编写update回调，默认会返回未修改的现有元素集合
  );

// 统一对所有enter+update元素应用过渡
const t1 = allGroups
  .transition()
  .attr(...); // g元素的目标属性
const t2 = allGroups
  .select('rect')
  .transition()
  .attr(...); // rect元素的目标属性

transitions.push(t1.end(), t2.end());

return Promise.all(transitions);

关键说明 #

• 你之前的过渡仅作用于update元素，是因为过渡逻辑仅写在了update回调内部，enter阶段新增的元素不会进入update回调的执行逻辑
• 如果你需要对enter和update元素设置不同的过渡起始状态，可以保留update回调，仅在回调内设置update专属的起始属性，不要在回调内执行过渡、返回原始选择集即可：

  .join(
    enter => { /* 创建元素 + enter专属起始状态 */ },
    update => update.attr('your-attr', update专属起始值) // 返回原始选择集，不要返回过渡
  )
  

• 关于你提到的update回调返回值问题：如果一定要在回调内处理过渡，需要在enter和update回调中都编写过渡逻辑、各自返回对应的过渡实例，join会自动合并两类元素的过渡实例作为返回值，但这种写法会导致过渡逻辑重复冗余，不推荐。

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