javascript - d3のマウス入力

Question

私はd3でマウスが触れたときに更新されるグラフを書きました（マウスオーバーを使用）。データは更新されますが、マウスがまだバーにある場合、マウスオーバーはグラフを継続的に更新します。

だから私はjQuery mouseenterを見ていました。d3 で mouseenter を実装する可能性はありますか?

Answer 1

d3 を介して mouseenter イベントを追加します。

d3.select(".class").on("mouseenter", function(){ // do stuff })

Answer 2

「mouseover」と「mouseenter」の違いは、「mouseenter」は要素自体に対してのみ発火するのに対し、「mouseover」は要素自体とそのすべての子要素に対して発火することだと思います。

Mouseover: ポインターが添付された要素または子要素の上に移動したときに発生します。ポインターを他の子要素に移動すると、新しいイベントがトリガーされます。https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/mouseover?redirectlocale=en-US&redirectslug=Mozilla_event_reference%2Fmouseover

Mouseenter: ポインターがアタッチされた要素の上に移動すると発生します。子要素はイベントをトリガーしません。https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/mouseenter?redirectlocale=en-US&redirectslug=Mozilla_event_reference%2Fmouseenter

したがって、独自の「mouseenter」が必要な場合は、 のようなチェックを行いif (this === d3.event.target)、その後に を実行してd3.event.stopPropagation()、リスナーが割り当てられた要素のみを取得できます。お役に立てれば。