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>

d3为d3.xml加载元素添加缩放功能

1 个答案: