我使用 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");
});
最佳答案
您实际上有两个问题:
问题 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>
关于javascript - d3 向 d3.xml 加载的元素添加缩放功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40358158/