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

【问题标题】：d3.js add zoom functionality to external svg filed3.js 向外部 svg 文件添加缩放功能
【发布时间】：2021-10-19 19:04:36
【问题描述】：

我正在开发平面图查看器，其中应该能够选择所述平面图的某些房间。我试图在 svg 文件的帮助下解决这个问题。到目前为止，我总是直接在 javascript 中生成 svg 并将其添加到 DOM 中，并添加所有 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);
}

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

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

【问题讨论】：

您好，请说明您的问题：您是否遇到错误消息？如果是，您也可以发布它。另外，欢迎来到 SO！

标签： javascript jquery svg d3.js

【解决方案1】：

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

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

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

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）

【讨论】：