Estoy tratando de descubrir cómo vincular los botones de zoom para reaccionar al árbol d3, sin embargo, no he encontrado un enfoque que funcione mientras se mantiene la posición.

La posición se restablece cada vez que actualizo el nivel de zoom, lo que significa que si hago una panorámica en algún lugar y ajusto el nivel de zoom, salta a la mitad del árbol.

Quiero algo como esto https://jsfiddle.net/vbabenko/jcsqqu6j/9/

 const TreeWrapper: FC<any> = ({ data }) => { const [zoomLevel, setZoomLevel] = useState(1); const scaleExtent = { min: 0.5, max: 3 }; const zoomIn = () => zoomLevel < scaleExtent.max && setZoomLevel((prevLevel) => prevLevel + 0.25); const zoomOut = () => zoomLevel > scaleExtent.min && setZoomLevel((prevLevel) => prevLevel - 0.25); return ( <Card title={null}> <button onClick={zoomIn} type="button"> + </button> <button onClick={zoomOut} type="button"> - </button> <Tree zoom={zoomLevel} scaleExtent={scaleExtent} translate={translate} zoom={zoomLevel} zoomable={true} initialDepth={1} collapsible={true} separation={{ siblings: 2, nonSiblings: 2 }} renderCustomNodeElement={(rd3tProps) => renderForeignObjectNode({ ...rd3tProps, foreignObjectProps }) } orientation="vertical" data={data} /> </Card> ); };