Así que he estado trabajando con un paquete React & D3 llamado "react-d3-graph". Al darme cuenta de que no podía manejar el zoom, eché un vistazo a las funciones de su biblioteca y noté que onZoomChange nunca se implementó. Habían escrito funciones auxiliares privadas para hacer zoom, pero nunca declararon la función en sí.
Me preguntaba si hay una alternativa que forzara el zoom en el gráfico, y estaba pensando que podría haber alguna forma de usar el zoom de D3 por defecto, pero no estoy seguro.
Estas funciones se declaran en svg/components/graph/Graph.jsx. Aquí está su representación de funciones aceptables:
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 ); }Aquí está mi retorno gráfico
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> ); }Este es el error que me sale cuando trato de hacer 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)