react-d3-graph

react-d3-graph copied to clipboard

So I'm attempting to add a zoom effect to my Graph. I copied the example from the docs with all the functions. Every other function, i.e. onMouseOverNode, onMouseOutNode, onMouseOverLink, etc, all work. Even onClickGraph which I thought might not be either. However, the only one that doesn't is onZoomChange. Whenever I try and zoom with a track pad or wheel I get the error: 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)

My Graph is set up as ` const onZoomChange = function(previousZoom, newZoom) { console.log(Graph is now zoomed at ${newZoom} from ${previousZoom}); };

<div className={"graphview"} > <Graph id={graph-id} // id is mandatory, if no id is defined rd3g will throw an error 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} onZoomChange={onZoomChange} onClickGraph={onClickGraph} /> </div> Any ideas on what I might be doing wrong?

It seems that this is happening because in the src/components/graph/Graph.jsx file, onZoomChange doesn't exist. The private functions for zooming exist, however, the main function itself does not.

Duplicate of https://github.com/danielcaldas/react-d3-graph/issues/365 . yarn install [email protected]