D3 Transition破坏重绘：含换行文本的D3图表动画更新异常

看起来你遇到的问题很典型——D3的transition机制和文本换行的DOM操作之间有点“冲突”，虽然调试时wrap函数确实执行了，但最终效果不对，我来帮你捋清楚原因和解决办法。

核心原因分析 #

首先，咱们得明白两个关键点：

1. D3的transition对非数值属性是立即生效的：比如.text()方法，它不属于可过渡的数值属性，所以你在transition链里调用.text()时，文本会立刻被替换，而不是跟着动画渐变。但问题在于，如果你同时在过渡矩形的宽度（或者文本容器的尺寸），此时wrap函数执行时，容器的尺寸还没完成过渡，用旧尺寸计算的自然不是你想要的换行效果。
2. .text()会清空子节点：很多经典的D3 wrap函数是通过给text元素添加tspan子节点来实现换行的，但一旦你调用.text()，它会把text元素内的所有子节点（包括之前生成的tspan）全部清空，直接替换成纯文本。如果wrap执行的时机不对，刚生成的tspan可能被后续操作覆盖。

具体解决方案 #

方案1：在过渡结束后执行wrap函数

这是最稳妥的办法，确保所有动画（包括容器尺寸的变化）都完成后，再基于最终的状态计算换行。

// 假设你的文本元素选择器是textElements，wrap函数需要传入换行宽度
textElements
  // 先更新文本内容（立即生效）
  .text(d => d.newLabel)
  // 执行过渡动画（比如位置、颜色等）
  .transition()
  .duration(500)
  .attr("x", d => d.newX)
  .attr("y", d => d.newY)
  // 过渡结束后调用wrap
  .on("end", function(d) {
    // 这里的this指向当前的text元素，传入对应的换行宽度（比如矩形的最终宽度）
    d3.select(this).call(wrap, d.rectWidth);
  });

如果你的矩形也在过渡宽度，那最好等矩形过渡完成后再处理文本换行：

// 先处理矩形的过渡
const rectTransition = rects.transition()
  .duration(500)
  .attr("width", d => d.newWidth);

// 矩形过渡结束后，处理文本的更新和换行
rectTransition.on("end", function(d) {
  // 找到对应rect的文本元素
  textElements.filter(el => el.__data__.id === d.id)
    .text(d => d.newLabel)
    .call(wrap, d.newWidth);
  
  // 如果文本也需要位置过渡，再加个transition
  textElements.filter(el => el.__data__.id === d.id)
    .transition()
    .duration(500)
    .attr("x", d => d.newX);
});

方案2：用Promise等待所有过渡完成

如果有多个并行的过渡（比如矩形和文本同时动），可以用D3的transition.end()方法返回Promise，等所有动画都结束后统一执行wrap：

// 定义所有需要等待的过渡
const rectAnim = rects.transition().duration(500).attr("width", d => d.newWidth).end();
const textAnim = textElements.transition().duration(500).attr("x", d => d.newX).end();

// 等待所有过渡完成后执行wrap
Promise.all([rectAnim, textAnim]).then(() => {
  textElements
    .text(d => d.newLabel)
    .call(wrap, d => d.newWidth);
});

方案3：修复wrap函数的执行时机（避免被过渡干扰）

如果你需要在过渡过程中也保持换行效果（比如文本长度动态变化），可以修改wrap函数，让它能在过渡的每一帧重新计算，但这种情况比较复杂，一般推荐先保证过渡结束后的效果正常。如果一定要做动态换行，可以监听过渡的tick事件：

textElements
  .text(d => d.newLabel)
  .transition()
  .duration(500)
  .attr("x", d => d.newX)
  .on("tick", function(d) {
    // 每一帧都重新计算换行，注意性能问题
    d3.select(this).call(wrap, d.rectWidth);
  });

⚠️ 注意：这种方式可能会有性能问题，因为每帧都要操作DOM，所以只在必要时使用。

验证你的wrap函数 #

最后，确认你的wrap函数是基于当前元素的实际尺寸计算的，比如经典的wrap实现应该是这样的（确保它用的是最终的容器宽度）：

function wrap(text, width) {
  text.each(function() {
    const textEl = d3.select(this);
    const words = textEl.text().split(/\s+/).reverse();
    let word;
    let line = [];
    let lineNumber = 0;
    const lineHeight = 1.1; // 行高，单位em
    const y = textEl.attr("y");
    const dy = parseFloat(textEl.attr("dy") || 0);
    
    // 清空原有内容，创建第一个tspan
    textEl.text(null);
    let tspan = textEl.append("tspan")
      .attr("x", 0)
      .attr("y", y)
      .attr("dy", dy + "em");
    
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      // 检查当前行的宽度是否超过限制
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        // 创建新的tspan
        tspan = textEl.append("tspan")
          .attr("x", 0)
          .attr("y", y)
          .attr("dy", ++lineNumber * lineHeight + dy + "em")
          .text(word);
      }
    }
  });
}

按照上面的方法调整后，应该就能解决过渡后文本不换行的问题了。

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