Hola, estoy tratando muy duro de resolver este problema. Inicialmente tengo un elemento svg y dentro de él un elemento g para hacer que el zoom en D3 también sea posible en Safari. Agrego un D3 Force-Directed Graph a ese elemento g después de generarlo. El zoom funciona perfectamente bien hasta ahora.

El Force-Directed Graph se genera como se conserva aquí: https://observablehq.com/@d3/disjoint-force-directed-graph

SVG inicial svg creado:

 svg.value = d3 .select("#network") .append("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .append("g");

Agregando el gráfico:

 d3.select("#network").selectAll("svg g > *").remove(); d3.select("#network").select("svg g").node().append(chart);

Y la función de zoom después:

 const svgZoom = d3.select("#network svg"); const g = d3.select("#network svg g"); svgZoom.call( d3 .zoom() .on("zoom", function () { g.attr("transform", d3.zoomTransform(this)); }) );

Ahora el problema es que el gráfico siempre se corta. Ya probé visibility:visible en cada uno de esos elementos, todavía no funciona. Incluso si configuro un viewBox mucho más grande que el contenido real, o si configuro el tamaño del gráfico al mínimo, el gráfico siempre se cortará en un rectángulo.

Lo que quiero lograr es agregar el gráfico a tamaño completo y, al alejar, los elementos desbordados se vuelven visibles. No quiero obtener la altura y el ancho del contenedor y minimizar el tamaño de cada gráfico dibujado, porque algunos gráficos son mucho más grandes que otros y quiero mantener el tamaño inicial de los nodos.

Como se ve actualmente

Sin alejar

Alejar