He basado mi código en este gráfico y tengo problemas para acercar.

Antes de acercar parece

pero después de hacer zoom, las cosas se complican

Mi código modificado se ve así

 const simulation = d3.forceSimulation(nodes) .force('link', forceLink) .force('charge', forceNode) .force('center', d3.forceCenter()) .on('tick', ticked); const svg = d3.select('figure#' + this.graphId) .append('svg') .attr('viewBox', [-width / 2, -height / 2, width, height]) .attr('style', 'max-width: 100%; height: auto; height: intrinsic;'); const link = svg.append('g') .attr('stroke', typeof linkStroke !== 'function' ? linkStroke : null) .attr('stroke-opacity', typeof linkStrokeOpacity !== 'function' ? linkStrokeOpacity : null) .attr('stroke-width', typeof linkStrokeWidth !== 'function' ? linkStrokeWidth : null) .attr('stroke-linecap', linkStrokeLinecap) .selectAll('line') .data(links) .join('line'); const node = svg.append('g') .attr('fill', nodeFill) .attr('stroke', nodeStroke) .attr('stroke-opacity', nodeStrokeOpacity) .attr('stroke-width', nodeStrokeWidth) .selectAll('g') .data(nodes) .join('g') .call(drag(simulation)); const tooltip = svg.append('text') .attr('visibility', 'hidden') .attr('opacity', 0) .attr('stroke', 'white') .attr('stroke-width', 0.2) .attr('fill', 'black') .attr('font-size', 22) ; const circle = node.append('circle') .attr('r', typeof nodeRadius !== 'function' ? nodeRadius : null) ; // // Zoom related stuff // function zoomed(e: any): void { node.attr('transform', e.transform); link.attr('transform', e.transform); circle.attr('transform', e.transform); tooltip.attr('transform', e.transform); } const zoomHandler = d3.zoom() .on('zoom', zoomed) .scaleExtent([1, 5]) ; svg.call(zoomHandler);

¿Qué no estoy haciendo bien y cómo puedo solucionarlo?

¡Cualquier ayuda sería apreciada!