react – quantifiedcoding

There are a variety of ways to have D3 and React interact since they both modify the DOM. Generally the recommended approach is “use useRef to access a React-rendered DOM element, and then put the D3 logic in a useEffect“.

useEffect(() => {
   if (svgRef.current) {
      const nodeJoin = d3.select(svgRef.current)
                         .selectAll(".node")
                         .data(data.nodes);

      nodeJoin.exit().remove();
      nodeJoin.enter().append("circle")...

      // Update data
      nodeJoin.attr("cx", d => d.x).attr("cy", d => d.y);
   }
}, [data, svgRef])