Javascript SVG元素部分位于另一个SVG元素下面

我正在使用d3.js和geojson文件绘制地图。 地图是正确生成的，并且地图是使用该国每个地区的多条路径绘制的。 使用城市的长而宽，我在投影点画了一个圆，因为我想应用地图的缩放和平移等变换

问题是，圆圈部分位于路径下方

下面是HTML页面的布局。 我之所以在g标记中放置圆圈，是因为我正在对地图应用缩放和平移，圆圈也应该相应地移动

svg
   g
    path d=.....
    circle...some attributes
   g
    path
    circle
   g
    path
   g
    path
   g
    path
    circle

---

如何解决该问题或是否有其他解决方案？

在您的布局中，每个区域的路径都是在圆之前绘制的，但是之前区域的圆可能会被后面绘制的路径隐藏。您可能需要为路径创建一个组，为圆添加一个组，为标签添加最后一个组，以避免重叠

- g.zoom
    - g.paths
        - path
        - path
        - ...
    - g.circles
        - circle
        - ...
    - g.labels
        - text...

---

您可以将缩放行为绑定到

g.zoom

组。关于，

这就是我正在做的。首先，我创建地图，一旦它被渲染，然后我画圆圈。但问题仍然存在。SVG的结构则相反。元素将按SVG结构中的原样显示，而不是按照呈现顺序显示。例如，第二组的路径将绘制在第一组的圆上，而不管第一组渲染的是哪一个。@Pablo.还有一件事。我想要鼠标悬停在圆上的行为，其中鼠标悬停时圆的半径增加。问题是当我在圆上悬停时，对于彼此接近的圆，先前绘制的一个将过渡到新半径，但随后它将位于另一个圆的下方。我希望鼠标悬停时，任何特定的圆都应始终位于另一个圆的上方，而不考虑HTML页面中的位置。添加另一个具有不可见圆的组。当用户将鼠标移动到圆上时，使圆可见（与第一个圆的颜色相同），并增加其半径。这一组的所有圆圈都将位于其他圆圈之上，悬停圆圈将是唯一出现的圆圈（其他圆圈是不可见的）。好的，我理解你的逻辑。但是我如何绘制不可见圆圈。