如何确定鼠标的位置是否足够接近路径？

Question

我正在用d3.js开发一个图表。有这个功能我不知道如何实现：我在图表上有一条折线，当鼠标足够接近时我想要突出显示它（使其更大胆，变成其他颜色）到这条折线的任何一点。

我不知道d3中是否有一些内置函数来确定鼠标是否接近我（svg元素）。如果没有，那么如何实现呢？

假设上述功能已经准备就绪，当鼠标接近此行时，如何拖动突出显示的折线，但实际上不在此线上？

Answer 1

尝试让每个点都有一个非常大的边框，如5px，但是使边框透明并使用background-clip属性来确保背景不会延伸到边框。

然后你可以使用鼠标悬停动作和触发效果[改变颜色，使其变大]。

这样，圆圈看起来大小相同，但有一个5px的隐藏边框，可以响应鼠标悬停事件。因此，靠近圆圈但不接触会触发事件，因为它确实触及了透明边框。

希望这有帮助。

Answer 2

您可以使用Voronoi曲面细分，如Mike Bostock的示例here所示。我们的想法是在整个图表上创建多边形，以便您可以确定鼠标在图表上任何位置的最近点。还有其他一些很好的示例来演示此here和here。

这增加了非常好的效果，并允许您突出显示线上最近的点，以及最近的线本身。从示例中实现起来并不太难，但如果您想要一个更简单的解决方案，则可以使用link13描述的透明圆边框方法。或者添加另一条粗线条宽度的折线，并将其不透明度设置为0，并将悬停侦听器添加到该线条。