CODEWITHSUNDEEP
javascriptd3.jszoomingevent-propagation
interwebjill
interwebjill

Reputation: 950

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

Following the advice here: How to disable double click zoom for d3.behavior.zoom?

I have disabled the zoom on double-click behaviour on the page when it loads:

https://bl.ocks.org/interwebjill/55f1c93864afa661524fb7c63ddd2d70

via line 202: .on("dblclick.zoom", null)

However, as soon as you use the custom zoom function to zoom via clicking the red button (see lines 183 and forward), the general double-click on zoom behaviour resumes. You can see this if you first try to zoom via double click. Zoom on dblclick should be disabled. Then click the red button to zoom in. Now try double-clicking again. You should see that this dblclick to zoom default behaviour has returned.

How might I disable zoom on double click after zooming via the custom zoom function?

Upvotes: 2

Views: 857

Answers (1)

Andrew Reid
Andrew Reid

Reputation: 38161

As Gerardo notes in his comment, you're calling the zoom in the zoomOut function (and the zoom to extent function). This reapplies the zoom behavior, so you would need to use .on("dblclick.zoom",null) every time you call the zoom behavior.

But, there is a way we can modify the zoom behavior itself so that we do not need to use this line. d3.zoom has a filter method that filters events based on a provided filter function. The default filter function looks like:

 function filter() {
   return !d3.event.button;
 }

(See the docs for more)

We can use this to filter out the dblclick events so that they do not trigger a zoom without having to override the event with selection.on():

var zoom = d3.zoom()
     .filter(function() {
       return !d3.event.button && d3.event.type != "dblclick";
     })
     ....

This disables the dblclick zoom event in the behavior, so you can now call it on a selection and not have to worry. Here's an updated block.

Upvotes: 3

Related Questions