javascript - d3单击放大svg，然后双击缩小

我正在使用d3放大svg元素。

当前，可以通过设置的方式滚动并远离图像。我只希望可以放大图像。我尝试将其设置为在双击时放大一次，如果再次双击将缩小，所以应该只有两个状态。

为了防止mousehweel，我尝试过：

svg.call(zoom).on("mousewheel.zoom", null);

我搜索了许多博客和教程，但找不到任何答案。

参见下面的代码：

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>

最佳答案

回答有关限制的问题：只需将刻度的范围设置为最大1。

.scaleExtent([1, 10])

这是演示：

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().scaleExtent([1, 10]).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>