Question

我正在使用d3.js和geojson文件绘制地图。正确生成地图，并使用该国家/地区的许多路径绘制地图。使用城市的长，拉特我在投影点画一个圆圈，因为我想应用变换，如地图的缩放和平移。

问题是圆圈部分地位于路径之下。

以下是HTML页面的布局。我在g标签中放置圆圈的原因是因为我正在应用缩放和平移来映射，圆圈也应相应移动。

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

我该如何解决问题，还是有其他解决方案？

Answer 1

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

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

您可以将缩放行为绑定到g.zoom组。的问候，