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 .