当标记太靠近时，D3.js鼠标悬停不活动

Question

我开发了一个使用图像标记的谷歌地图。我想在光标位于标记上方时显示一个信息框，但是当标记靠近在一起（不一定重叠）时，信息框不会显示。

什么控制鼠标悬停所需的标记之间的最小距离？

Answer 1

您的每个标记都在其<image>内<svg>。图像可能只有16px * 16px，但SVG是160px * 20px，整个区域都是抓取鼠标事件。当您的标记靠近在一起时，这意味着一个标记的SVG的不可见部分阻止鼠标事件通过下面的可见标记。

更改CSS以忽略<svg>上的鼠标事件，并且只响应<image>的可见部分似乎让事情按预期运行：

.members svg {
   pointer-events: none;
}
.members svg image {
  pointer-events: visiblePainted;
}