SVG元素重叠的问题

Question

我目前正在使用d3.js进行可视化。请看一下here。 （这是您可能必须加载的保管箱链接。）

我创建了一个函数，其中每个重叠元素在悬停在地图上的点上时会增加大小。

请尝试以下用例： 1.单击“美国”以放大该国家/地区。 2.拖动并平移到纽约，将鼠标指针悬停在点上。

如果一切顺利，你应该看到一个巨大的圆圈，其中嵌入了多个同心圆。它们都是那个特定坐标的重叠元素。

我面临的问题是，当SVG元素的大小增加时，其他城市的点会在同心圆的顶部重叠。

我的问题是：如何制作圆圈，我将鼠标悬停在SVG画布的顶部，以便看不到这些圆点。

Answer 1

您可以通过直接抓取DOM节点并将其置于顶部来实现：

this.parentNode.appendChild(this);

以下是一个示例：http://bl.ocks.org/1197731

Answer 2

解决方案最终是在鼠标悬停上附加SVG元素。这会将元素堆叠在SVG画布的最顶部，并在 mouseout 上删除它们。目前没有SVG元素的z-index替代品。