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

user_1299073 0
Viewed 25845

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() {};
d3.js javascript
3 Answers

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';
          }
        })
user_43015320
Related