在悬停时将<path>带到前面(当被其他元素遮挡时)

Question

今天早上我正在看NYTimes关于国家补贴的互动,并注意到即使一个国家被一个点遮挡,它也会在悬停时被提出.

例如,覆盖马萨诸塞州的点也部分覆盖了新罕布什尔州,但是当你进入新罕布什尔州的覆盖部分时,新罕布什尔州就会被提出来.

你觉得他们怎么做到这一点？点基于它们在DOM中的顺序位于状态轮廓的前面.我认为在所有事情的基础上可能会有第二组状态轮廓,听取会触发底层形状的鼠标悬停,但事实似乎并非如此.

我需要在我正在处理的应用程序中实现类似的功能,并对使用SVG元素的优雅方式感到好奇.

谢谢.

Answer 1

正如Andy所指出的，纽约时报图形中的圆圈的 CSS 指针事件属性为 none：

circle {
    pointer-events: none;
}

可以使用以下方法在鼠标悬停函数中实现置于前面的行为：

stateShape.on("mouseover",function(){this.parentNode.appendChild(this);})