D3.js旭日图更新时Arc过渡报错：期望弧标志'0'或'1'

1. 自定义插值器未正确关联到Arc的过渡属性 #

多数情况下开发者虽定义了插值器，但执行过渡时未明确指定Arc的d属性使用该插值器，导致D3仍采用默认字符串插值处理路径。默认字符串插值仅直接拼接路径片段，无法正确处理Arc必须为0/1的flag参数。

2. 插值器实现未强制Arc Flag为整数 #

若自定义插值器未对largeArcFlag和sweepFlag做取整或布尔值转换，过渡过程中会产生0到1之间的小数（如0.5），直接代入路径生成就会触发Expected arc flag报错。

3. Sunburst库内部逻辑覆盖过渡配置 #

部分封装好的sunburst库会内置更新逻辑，可能在你设置自定义插值器后，重新绑定了默认Arc生成逻辑，导致你的插值器未生效。

步骤1：确保自定义插值器强制Arc Flag为0/1 #

正确的Arc插值器需保证两个flag始终为整数，标准实现如下：

// 自定义Arc插值器
function arcInterpolator(a, b) {
  const interpolate = d3.interpolateObject(a, b);
  return function(t) {
    const i = interpolate(t);
    // 强制flag为整数（0或1）
    i.largeArcFlag = Math.round(i.largeArcFlag);
    i.sweepFlag = Math.round(i.sweepFlag);
    // 用sunburst库的Arc生成器生成路径
    return sunburstArcGenerator(i);
  };
}

步骤2：在过渡阶段明确指定使用该插值器 #

更新Arc元素的过渡逻辑时，必须显式为d属性绑定自定义插值器，而非依赖默认行为：

// 获取Arc元素的更新选择集
const arcUpdate = d3.selectAll('.sunburst-arc')
  .data(newData);

// 过渡更新
arcUpdate.transition()
  .duration(750)
  .attrTween('d', function(d) {
    // 获取当前元素的旧数据（过渡起始状态）
    const oldArcData = d3.select(this).datum();
    // 返回自定义插值器函数
    return arcInterpolator(oldArcData, d);
  });

步骤3：排查Sunburst库的内部干扰 #

如果使用第三方sunburst库，需检查其更新方法是否会重置Arc的过渡配置，可尝试：

• 绕过库的内置更新函数，直接操作底层D3选择集
• 在库执行更新后，重新绑定自定义插值器的过渡逻辑

• 过渡过程中打印插值器返回的路径字符串，确认largeArcFlag和sweepFlag始终是0或1
• 确保sunburstArcGenerator能正确处理插值后的中间状态数据

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