javascript - 带来悬停在前面（被其他元素遮挡时）

Question

今天早上我在看纽约时报关于州补贴的互动，并注意到即使一个州被一个点遮住，它也会在悬停时提前。

例如，覆盖马萨诸塞州的点也部分覆盖了新罕布什尔州，但是当您将鼠标移到新罕布什尔州被覆盖的部分时，新罕布什尔州被提前了。

你认为他们是如何做到这一点的？根据它们在 DOM 中的顺序，这些点位于状态轮廓的前面。我认为在一切之上可能有第二组状态轮廓，监听会触发底层形状的鼠标悬停，但情况似乎并非如此。

我需要在我正在开发的应用程序中实现类似的功能，并且对 SVG 元素的优雅方式感到好奇。

谢谢。

Answer 1

正如Andy所指出的，该 NYT 图形中的圆圈的 CSS 指针事件属性为 none：

circle {
    pointer-events: none;
}

使用此方法可以在鼠标悬停功能中实现带到最前面的行为：

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

Answer 2

现在您可以使用以下raise()方法：

函数中的示例：

highlightSite(site) {
        let selectedSite = d3.selectAll(`[siteName=${site}]`)
        selectedSite.raise()
        selectedSite
            .attr('stroke', 'black')
            .style('opacity', 1)
    }