描述
使用 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图放大.