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'svg')
        .scaleExtent([-5, 8])
        .extent([[0, 0], [300, 300]])
        .on('zoom', () => {

            .attr('transform', D3.event.transform);


        .filter(() => {

          const foundNode = this.N.findNodeByID('_')[1])
          if ( !!foundNode && D3.event.type === 'dblclick' && === 'SearchRelationspec') {
            return false;
          } else {
            return !'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:'svg').selectAll('circle').on('dblclick', () => {
  // 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 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 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.

Related Query

More Query from same tag