如何避免使用 d3js 在地图上重叠圆圈

how to avoid overlapping circles on a map using d3js

我在地图上放了很多圆圈，当鼠标悬停时，圆圈会改变颜色并显示一些文字，如图所示。问题是一些圆圈由于相同的地理位置而相互重叠，然后只有最上面的圆圈起作用。摆脱这种情况的最佳方法是什么？我尝试手动更改地理信息，这很乏味并且由于缺乏对重叠的控制而无法很好地工作。在我的例子中，在同一个地理位置上最多可能有 5 个重叠的圆圈。

一些注意事项：

  • 我也遇到过同样的问题。我通过移动点来处理它，使它们永远不会重叠，即使点位置没有准确地放置在地图上也是如此。我的弹出文本说明了位置，以便工作。在我的例子中，我在实际图像文件上使用旧的 skool html 图像映射，并仔细映射热点。

  • 您可以跳转到常规地理映射软件，并使用单独的图钉或它们的 "cloud" 显示太近的图钉。当您放大地图时，"cloud" 会恢复为单独的图钉图标。这确实允许用户自己放大，并且在移动设备上运行良好。这行得通，但它绝对不是 D3。

  • 我刚刚看到一个很酷的放大镜工具，它是 JavaScript 的实现。但这仅适用于图像。如果你很有动力，也许你可以破解代码并为 D3 实现（它只使用 SVG 元素。）你可以看到 an example of the technique in action here. 将鼠标拖到该页面上的图像上。

  • 该功能使用名为 'zoomie.js' 的工具，位于 here at Github. 目的是让您的地图上的一组点定位器在缩放模式下有足够的间隔，可以清楚地显示确定。虽然不知道您将如何处理鼠标悬停事件。我想你可以让文本在缩放放大镜模式下始终可见。

  • 请问您几个问题：您有多少用户使用移动设备？手机上没有鼠标悬停。他们将如何获得鼠标悬停效果？

这里有两种聚类方法：

另一种方法是使用fisheye；虽然，我不确定它如何应用于地图。