[Solved]-In D3, How to disable double click zoom conditionally?-d3.js

Aug's answer pointed me in the right direction but just in case someone needed more detail here's how I resolved my issue. It

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. This code worked for me in d3 version 5.15.x

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

Why don't you do the same thing you did with your images? You can use your custom code with stopPropagation:

d3.select('svg').selectAll('circle').on('dblclick', () => {
  event.stopPropagation();
  // your code here
});

This will allow you to harness double click you want without propagating the double click to the svg.

I think you have two options. You can do what you suggested which was to utilize event delegation check if the event.target is a circle element. Just be aware in d3 you may need to hook into d3.event instead to access the target.

d3.zoom also provides a way to filter with the zoom.filter which similarly you can pass in the condition you want to hook into i.e. checking if d3.event.target is a circle.

EDIT: It sounds like you are using d3.v3 which from the API doesn't support as much to handle these use cases. I highly suggest upgrading.