d3: 使用自定义缩放后禁用 "dblclick.zoom" 默认行为 returns

Question

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

我在页面加载时禁用了双击缩放功能：

通过第 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.

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