How to disable double click zoom for d3.behavior.zoom?
Javascriptd3.jsJavascript Problem Overview
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() {};
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
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.
Solution 3 - Javascript
I believe the selected answer works in versions less than 5 but just in case this is how I resolved my issue version 5.15.x
using this .on("dblclick.zoom", null); is noted in the documentation but it actually threw an error when I tried to use it (can you believe the nerve of my app? lol).
https://github.com/d3/d3-zoom/blob/main/README.md#zoomTransform
Instead of using the dblclick.zoom approach, .filter did the trick for me.
I am already using double-click events for other user needs. So there are specific instances in which I do not want the double click zoom to occur.
D3.select('svg')
.call(D3.zoom()
.scaleExtent([-5, 8])
.extent([[0, 0], [300, 300]])
.on('zoom', () => {
D3.selectAll('g')
.attr('transform', D3.event.transform);
this.updateAfterInit(this.root);
})
.filter(() => {
const foundNode = this.N.findNodeByID(D3.event.srcElement.id.split('_')[1])
if ( !!foundNode && D3.event.type === 'dblclick' && foundNode.data.type === 'SearchRelationspec') {
return false;
} else {
return !D3.event.target.classList.contains('drawarea') && D3.event.type === 'dblclick';
}
})