So I've been working with a React & D3 package called "react-d3-graph". Noticing I couldn't handle zooming, I took a look at their library functions and noticed onZoomChange was never implemented. They had written private helper functions for zooming, but never declared the function itself.

I was wondering if there is an alternative that would force zoom onto the Graph, and I was thinking there might be some way defaulting onto D3's zoom, but I'm not sure.

These functions are declared in the svg/components/graph/Graph.jsx. Here is their render of acceptable functions:

 render() {
    const { nodes, links, defs } = renderGraph(
      this.state.nodes,
      {
        onClickNode: this.onClickNode,
        onDoubleClickNode: this.onDoubleClickNode,
        onRightClickNode: this.onRightClickNode,
        onMouseOverNode: this.onMouseOverNode,
        onMouseOut: this.onMouseOutNode,
      },
      this.state.d3Links,
      this.state.links,
      {
        onClickLink: this.props.onClickLink,
        onRightClickLink: this.props.onRightClickLink,
        onMouseOverLink: this.onMouseOverLink,
        onMouseOutLink: this.onMouseOutLink,
      },
      this.state.config,
      this.state.highlightedNode,
      this.state.highlightedLink,
      this.state.transform.k
    );
 }

Here is my Graph return

    return (
      <div className={"graphview"}>
        <Graph
          id={"graph-id"} // id is mandatory
          data={theData}
          config={myConfig}
          onClickNode={onClickNode.bind(this)}
          onClick={childFunction.bind(this)}
          onDoubleClickNode={onDoubleClickNode}
          onRightClickNode={onRightClickNode}
          onClickLink={onClickLink}
          onRightClickLink={onRightClickLink}
          onMouseOverNode={onMouseOverNode}
          onMouseOutNode={onMouseOutNode}
          onMouseOverLink={onMouseOverLink}
          onMouseOutLink={onMouseOutLink}
          onNodePositionChange={onNodePositionChange}
          onClickGraph={onClickGraph}
        />
      </div>
    );
}

This is the error I get when I try and zoom

Graph.js:333 Uncaught TypeError: Cannot read properties of undefined (reading 'transform')
    at HTMLDivElement.<anonymous> (Graph.js:333)
    at Dispatch.call (dispatch.js:57)
    at Gesture.emit (zoom.js:219)
    at Gesture.zoom (zoom.js:207)
    at HTMLDivElement.wheeled (zoom.js:262)
    at HTMLDivElement.<anonymous> (on.js:3)