説明
D3.js v5 バージョンを使用して強制ガイド グラフを描画すると、いくつかの関数間で競合が発生します。
- ノードをクリックしてノード情報を表示します
- ノードをダブルクリックしてノードの周囲を展開します
- ダブルクリックすると SVG 画像が拡大します (ズーム)
質問
ノードがダブルクリックされると、このノードのダブルクリック イベント、このノードのクリック イベント、および svg 全体のダブルクリック イベントがトリガーされます。
解決
方法 1
バブリングによるノードのダブルクリックイベントにより svg グラフ全体が拡大されることを考慮して、d3.js のイベントバブリングをキャンセルできます。
.on("zooms", function () {
d3.event.sourceEvent.stopPropagation();
})
効果：
- ノードをクリックしても SVG グラフ全体が拡大されない
- ノード以外の領域をクリックするとSVGを拡大できます
方法 2
ズーム時のダブルクリック イベントを null にリセットします。
vue によって導入された d3 ライブラリの d3-zoom.js のコードは次のとおりです。
効果：
- SVG 画像全体のダブルクリックズーム機能は無効であるため、ノードをクリックしても SVG 画像が拡大されないだけでなく、他の領域をクリックしても SVG 画像は拡大されません。