D3 JavaScript ライブラリを使用して SVG ダイアグラムを作成し、それらにマウス イベントを割り当てています。SVG ダイアグラムは、多くの任意のパス要素で作成された複雑なものになる可能性があります。マウスオーバーイベントで近くのすべての要素を特定する方法を見つけるのに苦労しています。たとえば、マウス カーソルがダイアグラム上を移動すると、カーソルから N ピクセルの半径内にあるすべてのコンポーネント SVG 要素を特定できます。
私はこれに取り組む方法に完全に困惑しています。SVG 構成要素が境界領域内にあるかどうかを判断できる API があるかどうかさえわかりません。
これに取り組む方法についてのヒントは、非常に高く評価されます。
序文: 元の投稿に対する @Duopixel のコメントは素晴らしいです。その方法が存在することを知りませんでした。ただし、MSDN ドキュメントによると、長方形の領域のみをサポートしているように見えますが、マウスの周りに円を表示する方が直感的です。
他のいくつかのテクニック：
スタイリングにストロークを使用しない場合は、要素を「拡張」する目に見えない太いストロークを使用するか、要素の上に透明な線/形状を少し大きく描画します。これらの要素の「クリック」イベントをリッスンします。
すべての要素とマウスのクリック半径のペアワイズ比較を行います。ここで例を作成しました: http://jsfiddle.net/AkPN2/5/。簡単だったので、円のみを実装しました。長方形のジオメトリを追加する必要があります。