修复React TypeScript D3旭日图中ES3/ES5严格模式下的函数及Transition错误

修复块级函数声明错误 #

严格模式下（ES模块默认启用），块级作用域内不允许使用function声明函数。直接将clicked函数移至组件函数顶层即可解决：

const SunburstChart = () => {
  // 将clicked函数移到组件顶层
  const clicked = (d: HierarchyRectangularNode<unknown>) => {
    // 你的点击逻辑代码
    const t = d3.transition().duration(750);
    // ...后续过渡处理
  };

  useEffect(() => {
    // D3初始化逻辑
    // 绑定点击事件
    path.on("click", clicked);
  }, []);

  return <div id="sunburst-container"></div>;
};

修复Transition重载不匹配错误 #

类型错误源于TypeScript无法正确推断D3选择器、过渡对象的泛型类型，需显式指定泛型参数：

1. 为路径选择器指定泛型：

// 显式指定选择器的元素类型和绑定数据类型
const path = svg.selectAll<SVGPathElement, HierarchyRectangularNode<unknown>>("path")
  .data(root.descendants().slice(1))
  .enter()
  .append("path")
  // ...设置路径属性
  .on("click", clicked);

2. 为弧生成器指定泛型：

// 明确弧生成器接收的数据类型
const arc = d3.arc<HierarchyRectangularNode<unknown>>()
  .startAngle(d => d.x0)
  .endAngle(d => d.x1)
  .padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005))
  .padRadius(y(1))
  .innerRadius(d => d.y0)
  .outerRadius(d => d.y1 - 1);

3. 确保过渡对象正确创建：
   在clicked函数中，用d3.transition()创建标准过渡对象，避免使用自定义或类型不匹配的变量：

const clicked = (d: HierarchyRectangularNode<unknown>) => {
  // 正确创建过渡对象
  const t = d3.transition().duration(750);
  
  path.transition(t)
    .attrTween("d", (node) => {
      const xd = d3.interpolate(x.domain(), [node.x0, node.x1]);
      const yd = d3.interpolate(y.domain(), [node.y0, 1]);
      return (t) => {
        x.domain(xd(t));
        y.domain(yd(t));
        return arc(node);
      };
    });
};

以上调整后，两个错误均可解决，同时保证TypeScript类型检查通过。

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