viewBox之外的SVG应该是可缩放的

Question

嗨，我正在努力解决这个问题。最初，我有一个svg-元素，其中有一个g-元素，以便在Safari中也可以放大D3。在生成g-元素后，我会在它后面附加一个D3 Force-Directed Graph。到目前为止，缩放效果非常好。

Force-Directed Graph生成为保留在此处：https://observablehq.com/@d3/不相交力定向图

初始svg-创建的元素：

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

添加图表：

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

以及之后的缩放功能：

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

现在的问题是图形总是被切割。我已经在这些元素中的每一个上尝试了visibility:visible，但仍然不起作用。即使我将viewBox设置为比实际内容大得多，或者将图形的大小设置为最小值，图形也总是会被剪切为矩形。

我想完成的是添加全尺寸的图形，并通过缩小溢出的元素使其可见。我不想得到容器的高度和宽度，也不想最小化绘制的每个图的大小，因为有些图比其他图大得多，我想保持节点的初始大小。

目前的情况

不缩小

缩小

Answer 1

图本身剪切边界，将overflow:visible添加到力定向图中解决了问题。