d3.js 向外部 svg 文件添加缩放功能

Question

我正在开发平面图查看器，其中应该能够 select 所述平面图的某些房间。 我正在尝试借助 svg 文件解决此问题。 到目前为止，我总是生成 svg 并将其添加到 DOM，直接在 javascript 中添加所有 d3.js 功能（缩放、平移）。 现在我正在尝试使用外部 svg 文件（具有相同的结构）实现相同的结果。 仍然有效的是简单地将这个现在的外部 svg 文件添加到 DOM，但我无法添加 d3.zoom 功能。

我的 svg 文件结构： <svg><g><image></image>{<polygon><title><title></polygon><text></text>, ...}</g></svg>

图像标签添加平面图 png，{} 括号内的标签是每个房间的值（使选择一个成为可能）

加载外部文件（同时尝试添加缩放功能）：

var svg, g;

d3.xml('test.svg').then(function (data) {
     var svgNode = data.getElementsByTagName("svg")[0];

     document.getElementById("svg-viewer-foreground-3").appendChild(svgNode);
                    
     svg = d3.select("svg").call(zoom);
     g = svg.select("g");
});

let zoom = d3.zoom().on('zoom', zoomed);

function zoomed() {
     g.attr("transform", d3.event.transform);
}

那么我该如何正确地做到这一点呢？

如果需要，我很乐意添加其他信息。 （这是我第一次问问题，所以我对错误的可能解释）

Answer 1

好的，我没有非常具体地提出我的问题，但我自己找到了解决方法。 也许对某人有帮助。

所以简而言之，我遇到的问题是我无法将外部 SVG 文件加载到 DOM，同时能够使用 d3.js 缩放功能。 或者更详细地说，我无法在使用 d3.xml 获得的 <svg> 节点上调用缩放。

所以我的解决方案是简单地创建一个新的 svg 节点，添加从文件加载的 svg 节点的属性，然后添加 append 所有子节点：

d3.xml(path).then(function (data) {
    // attributes have to be set manually
    var svgNode = data.getElementsByTagName("svg")[0];
    svg = d3.select('#div-id').append("svg")
            .attr("width", svgNode.getAttribute("width"))
            .attr("height", svgNode.getAttribute("height"))
            .attr("id", svgNode.getAttribute("id"))
            .attr("class", svgNode.getAttribute("class"))
            .attr('viewBox', svgNode.getAttribute("viewBox"))
            .call(zoom);

    document.getElementById("svg-id").appendChild(data.getElementsByTagName("g")[0]);
});

var zoom = d3.zoom().on('zoom', handleZoom);

function handleZoom() {
     d3.select('g')
       .attr('transform', d3.event.transform);
}

这对我有用，但很可能有一个更优雅的解决方案。 （哦，我用的是 d3v5）