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

Question

我在地图上放置了许多圆圈，当鼠标结束时，圆圈会改变颜色，并显示一些文本，如图像中所示。问题是，由于相同的地理位置，一些圆圈相互重叠，只有最上面的圆才能工作。走出这种局面的最好办法是什么？我尝试手动更改地理信息，这是乏味的，并没有很好的工作，因为缺乏对重叠的控制。在我的例子中，可能有多达5个圆圈重叠在同一地理位置。

​

​

Answer 1

几个注意事项：

• 我也有过同样的问题。我通过移动点来处理这件事，这样它们就不会重叠，即使在地图上没有准确地放置点的位置。我的弹出式文本说明了位置，所以这是可行的。在我的例子中，我使用的是旧的skool图像映射，而不是实际的图像文件，并有仔细映射的热点。
• 您可以跳转到一个普通的地理地图软件，使用个别的引脚或他们的“云”显示的引脚定位太近。当你在地图上放大时，“云”会恢复为独立的别针图标。这确实允许用户自己放大，并且在移动设备上工作得很好。这是可行的，但绝对不是D3。
• 我确实看到了一种很酷的放大镜工具，那就是JavaScript实现。但这只适用于图像。如果您有很高的积极性，也许您可以破解代码并为D3实现(它只是使用SVG元素)。您可以看到这里是这个技术的一个例子。将鼠标拖动到页面上的图像上。

​

​

• 该功能使用了一个名为“zoomie.js”的工具，定位为在吉特布。，您的意图是在变焦模式下地图上的一组点定位器有足够的间隔，可以清楚地识别。不过，我不知道你将如何处理鼠标控制事件。我想你可以在放大放大镜模式下看到文本。
• 问你几个问题:你的移动设备上有多少用户？手机上没有鼠标。他们怎么才能得到鼠标覆盖的效果？

Answer 2

以下是两种聚类方法：

• http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.388.html
• http://bl.ocks.org/gisminister/10001728

另一种方法是使用鱼眼；不过，我不确定它如何应用于映射。