How to disable double click zoom for d3.behavior.zoom?

Question

I do not want d3.behavior.zoom to add the ability to double click zoom on my graph. How can I disable this behavior?

Here is a JSFiddle with the unwanted behavior.

I have tried the following without any luck.

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

Answer 1

You can disable the double-click behavior by removing the zoom behavior’s dblclick event listener. Looking at your code, you’ve assigned the zoom behavior to the SVG element. So you could say:

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

Or, together with where you register the zoom behavior:

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

You might also want to move the zoom behavior down to a G element rather than putting it on the root SVG element; I’m not sure it will work correctly on the root SVG, since the SVG element doesn’t support the transform attribute.

Answer 2

It's easy to set up a proxy function. Store the default (target) event, and then register a proxy event instead. The proxy will then enable / disable the target event using whatever logic you need:

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));

By applying the proxy pattern in this way, you can simply change the "enableEvents" variable to enable or disable the events.