d3.js 取消zoom双击放大, 阻止默认事件

描述

使用 D3.js v5版本绘制了一个力引导图, 有几个功能之间发生了冲突:

• 单击节点展示节点信息
• 双击节点以该节点为中心展开
• 双击导致 svg 图放大 (zoom)
  

问题

双击节点时, 会触发这个节点的双击事件, 这个节点的单击事件, 还有整个svg的双击事件.

解决

方法一

考虑到整个svg图会受节点双击事件影响导致放大, 是由于冒泡导致的, 所以可以取消一下 d3.js 的事件冒泡:

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

效果:

• 点击节点时不会放大整个 svg 图
• 点击节点以外的其他区域时, svg 可以放大

方法二

将 zoom 中的双击事件重新设置为null:

vue 引入的 d3 库中, d3-zoom.js 中的代码:

效果:

• 整个svg图的双击放大功能失效, 因此不仅点击节点时不会导致svg图放大, 点击其他区域也不会使svg图放大.