如何使用打字稿在 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

Answer 1

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

由于您选择的 SVG 类型为 d3.Selection<SVGSVGElement, unknown, null, undefined>，因此：

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

Answer 2

如果没有别的办法，你可以投zoomBehavior as 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);

  }

如何使用打字稿在 d3 svg 上正确键入缩放？

how to properly type zoom on d3 svg with typescript?

d3.js

typescript