3

ここにデータの視覚化があります（2番目のもの）：

http://mikeheavers.com/main/work

スキルフィールドを表す円をクリックすると、特定のスキルを持つ内側の緑色の円が表示されます。スキルを表す緑色の円を押し続けると、マウスを離すとアニメーション化、成長、縮小します。ただし、円をクリックするだけでは大きくなりますが、以前のサイズには戻りません（mousedown登録されていないと思います）。その結果、クリックするたびに円が大きくなります。

d3またはJavascript/jQueryを使用して、クリック動作を防ぐ方法はありますか？欲しいだけmouseupですmousedown。

4

1 に答える 1

2

あなたが説明したものとは異なる行動を観察しています。

  • 円を 1 回クリックすると、クリックの長さに関係なく (押し続けていてもいなくても)、元のサイズに戻ります。
  • 円を繰り返しすばやくクリックすると、円が大きくなり始め、元のサイズに戻りません。
  • 円を押したままマウスを円の外に移動すると、円はピンクのままで、元のサイズには戻りません。

.on('mouseout', handler)球体を元のサイズに簡単に戻すことで、最後の問題を解決できると思います。これはかなり明白であり、mouseup外に移動したためにイベントを見逃していました。mouseupドキュメント全体に を添付することもできます ( d3.select('body').on('mouseup', handler))。これにより、そのようなイベントがキャッチされます。その場合は、最後にクリックされた球体を記録するだけで済みます。

さらに、元の問題を解決するために、イベントを追加することでイベントが確実にmouseupトリガーされるようにすることができます。これにより、高速クリックがブラウザーによるダブルクリックまたはその他のイベントに変わるのを防ぎます。e.preventDefault()mousedown

これらの問題について議論している他の投稿:

于 2013-02-22T18:06:03.997 に答える