Chromeでマウスオーバー/マウスアウトイベントをトリガーするd3.dragを停止する方法
phil_20686
次のd3ビジュアライゼーションがあります。上部の暗い色は、ノードが選択されたことを示します。選択されていないノードにマウスを合わせると不透明度が変わるため、クリックするとどのノードが選択されるかをユーザーが確認できます。
これは、CSSスタイルシートと次のjs / d3を介して実現されます。
nodeSelection.select("circle").on('mouseover', function(e) {
d3.select(this).classed("hover", true);
_this.fireDataEvent("mouseOverNode", this);
});
nodeSelection.select("circle").on('mouseout', function(e) {
d3.select(this).classed("hover", false);
_this.fireDataEvent("mouseOutNode", this);
});
ここまでは順調ですね。ただし、ドラッグすると、ドラッグ機能によって、ドラッグしていないノードでマウスオーバーイベントとマウスアウトイベントがランダムにトリガーされるように見えます。これにより、ノードの不透明度がちらつきます。Chromeの開発ツールを見ると、これはノードがクラス「ホバー」を取得しているためであることがわかります。このCSSクラスを追加する上記のコードは他のどこにも表示されません。コンソールログを使用して、mouseoverイベントとmouseoutイベントが発生していることを確認しました。これらのノードは、多くの場合、カーソルから遠く離れています。
この問題はFirefoxでは発生しません。
phil_20686
更新：私は実際にこれを投稿した直後にこれを修正することができました。ドラッグスタート内でリスナーの登録を明示的に解除し、ドラッグエンドで再登録します。彼らが同様の問題を抱えているならば、それはまだ何人かの人々にとって興味深いかもしれません。
ドラッグ機能は次のようになります。
var drag = d3.behavior.drag()
.on("dragstart", function(d) {
console.log("dragstart");
d.dragstart = d3.mouse(this); // store this
d.fixedbeforedrag = d.fixed;
d.fixed=true;
// deregister listeners
nodeSelection.select("circle").on("mouseover", null).on("mouseout", null);
})
.on("drag", function(d) {
d.px = d.x; // previous x
d.py = d.y;
var m = d3.mouse(this);
d.x += m[0] - d.dragstart[0];
d.y += m[1] - d.dragstart[1];
nodeSelection.attr("transform", "translate(" + [d.x, d.y] + ")");
_this.getForce().start();
})
.on("dragend", function(d) {
console.log("dragend");
delete d.dragstart;
d.fixed = d.fixedbeforedrag;
//reregisters listeners
_this.updateSVG();
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
マウスオーバーイベントでd3円グラフにテキストを追加する
- 2
マウスオーバーでトリガーされるイベントの数を減らす
- 3
javascriptでマウスオーバーイベントがアクティブなときにonkeypressイベントをトリガーする方法
- 4
マウスオーバーイベントがトリガーされたときに画像を表示する
- 5
マウスをクリック＆ドラッグせずに、d3を使用して連続線を描画するにはどうすればよいですか？マウスオーバーイベントを使用するだけですか？
- 6
Uncaught SyntaxError：D3ツリーマップでのマウスオーバーイベントを伴う予期しないトークン
- 7
マウスを動かしてCasperJSでホバーイベントをトリガーする
- 8
jQueryからマウス移動イベントをトリガーする方法
- 9
Leaflet MarkerCluster-イベント（マウスオーバー、マウスクリック）でクラスター内のマーカーを取得する方法は？
- 10
特定の領域でフォーカスアウトイベントのトリガーを停止する方法
- 11
マウスオーバーイベントで毎回imgタグをカウントする方法
- 12
d3のアイテムのペアでマウスオーバーイベントをどのように実行しますか？
- 13
Vue.jsコンポーネントでD3マウスイベント座標を使用する
- 14
D3マウスダウン中にドラッグをトリガーする
- 15
マウスホバーで追加のイベントをトリガーするjCanvas
- 16
ボタンクリックとマウスオーバー/マウスアウトでノードテキストを表示および非表示にする方法は？D3 / JS
- 17
トリガーする色でマウスダウンイベントを取得できません
- 18
マウスダウンイベントがマウスアップイベントでトリガーされるのはなぜですか？
- 19
間違ったノードを削除するD3マウスダウンイベント
- 20
マウスオーバー情報をトリガーする方法
- 21
フォーカスアウトイベントをトリガーする方法
- 22
マウスオーバー/マウスアウト（SMIL）でインラインSVGの塗りつぶし属性をアニメーション化する方法
- 23
子要素をオーバーするときにマウスリーブトリガーを停止します
- 24
要素の外部でJavascriptマウスイベントをトリガーします
- 25
イベントを伝播させずに、マウスオーバーイベントを手動でトリガーします
- 26
マウスオーバーイベントを一時的に無効にするタイマーが必要です
- 27
マウスオーバー/マウスアウトイベント内で$ thisキーワードを使用して変数を宣言します
- 28
javascript を使用して img 要素に対してのみマウスオーバー イベントをトリガーする方法
- 29
キー/マウスイベントをリッスンする
コメントを追加