Question

今天早上我正在看NYTimes interactive on state subsidies，并注意到即使状态被一个点遮挡，它也会在悬停时被提升。

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

你认为他们如何实现这一目标？点基于它们在DOM中的顺序位于状态轮廓的前面。我认为在所有事情的基础上可能会有第二组状态轮廓，听取会触发底层形状的鼠标移动，但情况似乎并非如此。

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

感谢。

Answer 1

<{> 3}} As noted该NYT图形中的圆圈的CSS指针事件属性为无：

circle {
    pointer-events: none;
}

使用Andy：

可以在鼠标悬停功能中实现前置行为

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)
    }

在悬停时将<path>置于前面（当被其他元素遮挡时）</path>

2 个答案: