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，{} 括号内的标签是每个房间的值（使 select 成为可能）

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

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 节点的属性，然后附加所有子节点：

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）

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

d3.js add zoom functionality to external svg file

javascript

jquery

svg

d3.js