Zoom Functionality Not Implemented, need alternative

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)

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW