What typescript type do I assign d3.select() in order to be able select the SVG element using useRef hook?

Question

Im trying to add the correct type to my d3.select statement in order set the mySVG variable.

function App() {
  const [mySVG, setMySVG] = useState<d3.Selection<d3.BaseType, unknown, HTMLElement, any>>()
  const svgRef = useRef<SVGSVGElement | null>(null)

  useEffect(() => {
     setMySVG(d3.select(svgRef.current));
     
  }, [])

  return (
    <svg ref= {svgRef}>


    </svg>
  );
}

At the moment i get the error highlight below in the code where I have:

setMySVG(d3.select(svgRef.current));

Select the specified node element.

The first generic "GElement" refers to the type of element to be selected. The second generic "OldDatum" refers to the type of the datum, on the selected element. This is useful when re-selecting an element with a previously set, know datum type.

@param node — An element to be selected

Argument of type 'Selection<SVGSVGElement | null, unknown, null, undefined>' is not assignable to parameter of type 'SetStateAction<Selection<BaseType, unknown, HTMLElement, any> | undefined>'. Type 'Selection<SVGSVGElement | null, unknown, null, undefined>' is not assignable to type 'Selection<BaseType, unknown, HTMLElement, any>'.

The types of 'select(...).select(...).select(...).data' are incompatible between these types. Type '{ (): undefined[]; (data: NewDatum[] | Iterable, key?: d3.ValueFn<any, NewDatum | undefined, import("/Users/logithangunaratnam/JavascriptProjects/practice_graph_creator/frontend/node_modules/@types/styled-components/node_modules/@types/react/index").ReactText> | undefined): d3.Selection<...>; <Ne...' is not assignable to type '{ (): undefined[]; (data: NewDatum[] | Iterable, key?: d3.ValueFn<any, NewDatum | undefined, import("/Users/logithangunaratnam/JavascriptProjects/practice_graph_creator/frontend/node_modules/@types/styled-components/node_modules/@types/react/index").ReactText> | undefined): d3.Selection<...>; <Ne...'. Two different types with this name exist, but they are unrelated. Types of parameters 'data' and 'data' are incompatible. The 'this' types of each signature are incompatible. Type 'null' is not assignable to type 'HTMLElement'.

I have gotten it to work by replacing the types with any but I want to be able to assign the correct associated types.

Melquist

Answer 1

To select the SVG element using D3 and assign the correct TypeScript types for 'mySVG' you can make the following modifications to your code:

1. import the necessary types from D3 ('Selection' and 'BaseType')
2. Update the state definition for 'mySVG' to allow for a 'null' value as an initial state, and specify the correct types.
3. In the 'useEffect', check if 'svgRef.current' is not null before attempting to select it with D3. This helps prevent null reference errors.

import { Selection, BaseType } from 'd3';

function App() {
  const [mySVG, setMySVG] = useState<Selection<SVGSVGElement | null, unknown, HTMLElement, any> | null>(null);
  const svgRef = useRef<SVGSVGElement | null>(null);

  useEffect(() => {
    if (svgRef.current) {
      setMySVG(d3.select<SVGSVGElement, unknown>(svgRef.current));
    }
  }, []);

  return (
    <svg ref={svgRef}>
      {/* Your SVG content here */}
    </svg>
  );
}

Towardly