SVG out of viewBox should be zoomable-CodePudding

Hi I am trying really hard to solve this problem. Initially I have an svg-element and inside of it a g-element to make zooming in D3 also possible in Safari. I append a D3 Force-Directed Graph to that g-element after generating it. Zooming works perfectly fine so far.

The Force-Directed Graphis generated as preserved here: https://observablehq.com/@d3/disjoint-force-directed-graph

Initial svg-element created:

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

Adding the chart:

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

And the zoom-function afterwards:

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));
        })
);

Now the issue is that the graph always gets cut. I already tried visibility:visible on each of those elements, still not working. Even if I set a viewBox much bigger than the actual content, or if I set the size of the graph to a minimum, the graph will always get cut to a rectangle.

What I want to accomplish is add the graph full-size and by zooming out the overflowing elements get visible. I do not want to get the height and width of the container and minimize the size of each graph drawn, because some graphs are much bigger than the other ones and I want to keep the initial size of the nodes.

How it currenty looks

Without Zooming Out

Zooming Out

CodePudding user response：

The graph itself cuts the boundaries, adding overflow:visible to the Force-Directed Graph solved the problem.