D3.js鼠標懸停不活躍時，標記靠得太近

Question

我已經開發了利用圖像標記物的谷歌地圖。當光標位於標記上方時，我想顯示一個信息框，但當標記靠得很近（不一定重疊）時，信息框不會顯示。

什麼控制的鼠標懸停需要標記之間的最小距離被激活？

Answer 1

您每組標記是它自己的<svg>內的<image>。圖像可能只有16px * 16px，但SVG是160px * 20px，並且整個區域都是抓取鼠標事件。當你的標記是靠近在一起，這意味着，SVG的用於一個標記的不可見部分從貫通到下面的可見標記阻斷鼠標事件。

更改CSS忽略對<svg>鼠標事件，並僅在<image>的可見部分反應似乎有望把事情的工作：

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