Question

有没有办法从画布中完全删除/取消绑定d3.zoom？我想在启用缩放时仅启用缩放功能（通过单独的按钮设置）并在删除时回收鼠标事件（鼠标按下，向上等）。

这是我如何将d3缩放添加到画布

///zoom-start
var d3Zoom = d3.zoom().scaleExtent([1, 10]).on("zoom", zoom),
    d3Canvas  = d3.select("canvas").call(d3Zoom).on("dblclick.zoom", null),
    d3Ctx     = d3Canvas.node().getContext("2d"),
    d3width   = d3Canvas.property("width"),
    d3height  = d3Canvas.property("height");

function zoom() {
}

任何帮助将不胜感激。提前致谢

Answer 1

根据API：

在内部，缩放行为使用selection.on来绑定必要的事件侦听器以进行缩放。侦听器使用名称.zoom，因此您可以随后取消绑定缩放行为，如下所示：
selection.on(".zoom", null);

而且，要再次启用它，您只需要：

selection.call(zoom);

这是一个演示（按钮是自解释的）：

var svg = d3.select("svg");
var g = svg.append("g");
var zoom = d3.zoom().on("zoom", function() {
  g.attr("transform", d3.event.transform)
});
svg.call(zoom);

g.append("circle")
  .attr("cx", 150)
  .attr("cy", 75)
  .attr("r", 50)
  .style("fill", "teal");

d3.select("#zoom").on("click", function() {
  svg.call(zoom);
  console.log("zoom enabled")
});

d3.select("#nozoom").on("click", function() {
  svg.on(".zoom", null)
  console.log("zoom disabled")
});

svg {
  border: 1px solid gray;
}

.as-console-wrapper { max-height: 9% !important;}

<script src="https://d3js.org/d3.v4.min.js"></script>
<button id="zoom">Enable zoom</button>
<button id="nozoom">Disable zoom</button>
<br>
<svg></svg>

PS：我使用的是SVG，而不是画布，但原理是一样的。

从画布中删除/取消绑定d3缩放

1 个答案: