如何在使用TypeScript的D3 SVG中正确输入缩放？

Question

我有这段代码：

if (svg) {
    // zoom
    // svg type = d3.Selection<SVGSVGElement, unknown, null, undefined>
    const zoomBehavior = d3
      .zoom()
      .scaleExtent([0.5, 5])
      .translateExtent([
        [0, 0],
        [containerWidth, containerHeight],
      ])
      .on("zoom", (event) => {
        const zoomState = event.transform;
        console.log("zoomState", zoomState);
      });
    svg.call(zoomBehavior);
  }

我遇到了这个错误类型：

Argument of type 'ZoomBehavior<Element, unknown>' is not assignable to parameter of type '(selection: Selection<SVGSVGElement, unknown, null, undefined>, ...args: any[]) => void'.

我不想使用ts-ignore。

- gpbaculio

---

svg的定义是什么？它应该类似于svg: d3.Selection<SVGSVGElement, any, any, any>;。 - Mark

Answer 1

你可以在函数的泛型中定义缩放行为的类型，以匹配调用它的SVG选择的类型。

由于你的SVG选择被定义为 d3.Selection<SVGSVGElement, unknown, null, undefined>，那么：

   const zoomBehavior = d3
      .zoom<SVGSVGElement, unknown>()
   ...

- Rodrigo Divino

Answer 2

如果没有其他方法可行，你可以将zoomBehavior强制转换为any。

if (svg) {
    const zoomBehavior = d3
      .zoom()
      .scaleExtent([0.5, 5])
      .translateExtent([
        [0, 0],
        [containerWidth, containerHeight],
      ])
      .on("zoom", (event) => {
        const zoomState = event.transform;
        console.log("zoomState", zoomState);
      }) as any; //as any


    svg.call(zoomBehavior);

  }

- NicoWheat