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>

d3点击svg放大，下一次双击缩小

1 个答案: