如何确定鼠标事件附近的SVG元素?

pli*_*ske 8 svg d3.js

我正在使用D3 JavaScript库来构建SVG图并为其分配鼠标事件.SVG图可能很复杂,由许多任意路径元素组成.我一直在努力想办法确定鼠标悬停事件中所有附近的元素.因此,例如,当鼠标光标在图上移动时,我可以确定距光标N个像素半径内的所有分量SVG元素.

我完全不知道如何解决这个问题.我甚至不确定是否有一个API允许我确定SVG组成元素是否在边界区域内?

关于如何解决这个问题的任何提示都将非常受欢迎.

Zac*_*chB 10

前言:@ Duopixel对你原帖的评论很棒 - 我不知道该方法存在.但是,看起来它只支持每个MSDN文档的矩形区域,而在鼠标周围有一个圆圈似乎更直观.

其他几种技巧:

  1. 如果您没有使用笔划进行样式设置,或者在元素顶部绘制一个更大的透明线条/形状,请使用"展开"元素的不可见粗线条.收听这些元素的"点击"事件.

  2. 将每个元素与鼠标点击半径的元素进行成对比较.我在这里举了一个例子:http://jsfiddle.net/AkPN2/5/.我只实现了圆圈因为它们很简单 - 你需要为矩形添加几何体.