d3.js cancel zoom double-click to enlarge, prevent default event

describe

Using D3.js v5 version to draw a force-guided graph, there are conflicts between several functions:

• Click on a node to display node information
• Double-click a node to expand around the node
• Double click causes the svg image to zoom in (zoom)
  

question

When a node is double-clicked, the double-click event of this node, the click event of this node, and the double-click event of the entire svg will be triggered.

solve

method one

Considering that the entire svg graph will be enlarged due to the double-click event of the node, which is caused by bubbling, so you can cancel the event bubbling of d3.js:

        .on("zooms", function () {
    
    
            d3.event.sourceEvent.stopPropagation();
        })

Effect:

• The whole svg graph is not zoomed in when clicking on a node
• The svg can be zoomed in when clicking on an area other than the node

Method Two

Reset the double-click event in zoom to null:

In the d3 library introduced by vue, the code in d3-zoom.js:

Effect:

• The double-click zoom function of the entire svg image is invalid, so not only clicking on a node will not cause the svg image to enlarge, but clicking on other areas will not cause the svg image to enlarge.