Aprendiendo a reaccionar mediante la codificación, aquí estoy usando 'reaccionar-zoom-pan-pellizcar' para la rueda de desplazamiento del mouse, por lo que cuando hago zoom con el desplazamiento del mouse y su escala se vuelve más grande que '1.311', entonces debería hacer que el círculo sea más pequeño ("10" ), aquí he creado una demostración de lo que quiero lograr. https://codesandbox.io/s/react-zoom-pan-pinch-forked-svx5v6?file=/src/index.js

puede verificar desde la consola cuando el valor aumenta, ese círculo se vuelve más pequeño,

pero en mi código real estoy usando 'viewGenerator' (react-d3-graph) y customNode donde tengo ese svg y círculo

 import { Graph } from "react-d3-graph"; const [circleR, setCircleR] = useState("50"); const zoomChange = (event: any) => { if (event.state.scale < 1.311) { setCircleR("50"); } if (event.state.scale > 1.311) { setCircleR("10"); } console.log("event state scale ", event.state.scale); console.log("event circleR ", circleR); }; function CustomNode(props) { return ( <div> <svg viewBox="-1 -1 2 2"> <circle cx="0" cy="0" r={circleR} strokeWidth="0.1" stroke= "black" fill= "orange" /> </svg> </div> ); } const default_config = { d3_config: { nodeHighlightBehavior: false, staticGraphWithDragAndDrop: true, automaticRearrangeAfterDropNode: false, d3: { disableLinkForce: true }, height: 512, // width: 576, minZoom: 1, maxZoom: 1, node: { color: "lightblue", size: 500, highlightStrokeColor: "blue", fontSize: 20, highlightFontSize: 22, labelProperty: (node: default_config) => node.name ? node.name : node.id, viewGenerator: (node) => ( <CustomNode node={node} focusId={null} /> ), } }; const [config, setConfig] = useState(default_config); <Graph config={config.d3_config} />

El problema es que 'r={circleR}' solo toma el valor predeterminado del estado y no lo actualiza cuando acerco o alejo.

Dentro de mi función 'zoomChange' tengo dos console.logs y puedo verificar que me da los valores correctos y cambia entre '10' y '50' (la función zoomChange funciona bien), entonces, ¿cuál es la razón por la que no me actualizo? valor a 'r={circleR}' ? escribir valores como 'r="50" o r="10"' funcionará, pero quiero valores actualizados de acuerdo con setState.

¡El inglés no es mi lengua materna, por lo que podría haber errores!