javascript - d3 单击时放大 svg，下次双击时缩小

Question

我正在使用 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>

Answer 1

回答有关限制的问题:只需将比例范围设置为最大值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>