javascript - 当标记太靠近时 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;
}