javascript - d3 : disabled "dblclick.zoom" default behaviour returns after using custom zoom

Question

遵循此处的建议:How to disable double click zoom for d3.behavior.zoom?

我在页面加载时禁用了双击缩放行为:

https://bl.ocks.org/interwebjill/55f1c93864afa661524fb7c63ddd2d70

通过第 202 行:.on("dblclick.zoom", null)

但是，只要您使用自定义缩放功能通过单击红色按钮进行缩放(请参阅第 183 行及之后)，一般的双击缩放行为就会恢复。如果您首先尝试通过双击进行缩放，您会看到这一点。缩放 dblclick 应该被禁用。然后单击红色按钮放大。现在尝试再次双击。您应该会看到此 dblclick 缩放默认行为已返回。

如何在通过自定义缩放功能缩放后禁用双击缩放？

Answer 1

正如 Gerardo 在他的评论中指出的那样，您在 zoomOut 函数(以及缩放到范围函数)中调用缩放。这会重新应用缩放行为，因此每次调用缩放行为时都需要使用 .on("dblclick.zoom",null)。

但是，有一种方法可以修改缩放行为本身，这样我们就不需要使用这一行了。 d3.zoom 有一个过滤方法，可以根据提供的过滤函数过滤事件。默认的过滤器函数如下所示:

 function filter() {
   return !d3.event.button;
 }

(有关更多信息，请参阅 docs)

我们可以使用它来过滤掉 dblclick 事件，这样它们就不会触发缩放，而不必使用 selection.on() 覆盖该事件:

var zoom = d3.zoom()
     .filter(function() {
       return !d3.event.button && d3.event.type != "dblclick";
     })
     .... 

这会禁用行为中的 dblclick 缩放事件，因此您现在可以在选择时调用它而不必担心。这是一个 updated block .