how to properly type zoom on d3 svg with typescript?-CodePudding

i have this code:

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);
  }

I am getting this error type:

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

i don't want to use ts-ignore

CodePudding user response：

You can define the type of the zoom behavior in the generics of the function to match the types of the SVG selection that calls it.

Since your SVG selection is typed as d3.Selection<SVGSVGElement, unknown, null, undefined>, then:

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