javascript - d3 向 d3.xml 加载的元素添加缩放功能

Question

我使用 d3.xml 动态加载 svg 图像。然后，我想使用 d3.behavior.zoom() 将缩放功能附加到此 svg。

谁能解释一下如何将 d3.behavior.zoom() 与加载的 svg 链接起来？我在网上找不到任何东西。

请参阅下面的当前代码:

JS

<script src="http://d3js.org/d3.v3.js"></script>

d3.xml("map.svg").mimeType("image/svg+xml").get(function(error, xml) {
   if (error) throw error;
   var svg = d3.select(xml.documentElement)
   .call(d3.behavior.zoom().on("zoom", function () {
       svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
   }))
   .append("g");
});

Answer 1

您实际上有两个问题:

问题 1:加载并附加外部 SVG

在您的代码中，您没有将 SVG 附加到文档中。因此，第一步实际上是附加 SVG:

d3.xml("externalSVG.svg").mimeType("image/svg+xml").get(function(error, xml) {
    if (error) throw error;
    document.body.appendChild(xml.documentElement);
    //rest of the code here
});

问题 2:添加缩放

您提供的代码是将缩放添加到 <g>元素，而不是整个 SVG。因此，无法缩放外部 SVG。为此，您可以编写如下内容:

var svg = d3.select("svg")
    .call(d3.behavior.zoom().on("zoom", function () {
        svg.selectAll("*")
        .attr("transform", "translate(" + d3.event.translate + ")" 
        + " scale(" + d3.event.scale + ")")
}))

查看演示:

d3.xml("https://boxy-svg.com/images/logos/boxy-svg.svg").mimeType("image/svg+xml").get(function(error, xml) {
  if (error) throw error;
  document.body.appendChild(xml.documentElement);
	 var svg = d3.select("svg")
   .call(d3.behavior.zoom().on("zoom", function () {
       svg.selectAll("*").attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
   }))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>