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

Question

我在地图上放了很多圆圈，当鼠标结束时，圆圈会改变颜色并显示一些文字，就像在图像中一样。问题是由于相同的地理位置，某些圆圈彼此重叠，因此只有最顶部的圆圈起作用。出现这种情况最好的方法是什么？我尝试手动更改地理信息，这是繁琐的，由于缺乏对重叠的控制而无法很好地工作。就我而言，在同一个地理位置上最多可以有5个圆圈重叠。

Answer 1

几点说明：

• 我遇到了同样的问题。我处理它是通过移动点使它们永远不会重叠，即使点位置没有准确地放在地图上。我的弹出文本说明了这个位置是有效的。在我的情况下，我使用旧的skool html图像映射而不是实际的图像文件与精心映射的热点。

• 您可以跳转到常规地理地图绘制软件，并使用单独的引脚或“云”显示屏来确定太靠近的引脚。当您放大地图时，“云”会恢复为单独的图钉图标。这确实允许用户自己放大，并且它在移动设备上正常工作。这有效，但绝对不是D3。

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

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

• 针对您的一些问题：您的移动设备上有多少用户？手机上没有鼠标悬停。他们如何获得鼠标悬停效果？

Answer 2

以下是两种群集方法：

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

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