Question

我不希望d3.behavior.zoom添加在我的图表上双击缩放的功能。如何禁用此行为？

以下是JSFiddle，其中包含不受欢迎的行为。

我没有运气就试过以下内容。

 d3.behavior.zoom.dblclick = function() {};

Answer 1

您可以通过删除缩放行为的dblclick事件侦听器来禁用双击行为。查看代码，您已将缩放行为分配给SVG元素。所以你可以说：

d3.select("svg").on("dblclick.zoom", null);

或者，与注册缩放行为的位置一起：

.call(d3.behavior.zoom().on("zoom", update)).on("dblclick.zoom", null)

您可能还希望将缩放行为向下移动到G element，而不是将其放在根SVG元素上;我不确定它在根SVG上是否能正常工作，因为SVG元素不支持transform attribute。

Answer 2

设置代理功能很容易。存储默认（目标）事件，然后注册代理事件。然后，代理将使用您需要的任何逻辑启用/禁用目标事件：

＆＃13;

svg.call(zoom);
var dblclickTarget = svg.on("dblclick.zoom");
var mouseScrollTarget = svg.on("mousewheel.zoom");

function eventProxy(fn){
  return function(){
    // Enable events if enableEvents=== true
    if(enableEvents){
      fn.apply(this, arguments)
    }
  }
};

svg.on("wheel.zoom", eventProxy(dblclickTarget))
   .on("mousewheel.zoom", eventProxy(mouseScrollTarget));

＆＃13;

通过这种方式应用代理模式，您只需更改＆＃34; enableEvents＆＃34;变量以启用或禁用事件。

如何禁用d3.behavior.zoom的双击缩放？

2 个答案: