javascript - 重新排列彼此太近的点

标签 javascript css algorithm design-patterns math

我的情况是,我在静态 map 图像上动态定位一堆图标,每个图标都通过 CSS 进行绝对定位。现在经常发生,两个甚至更多的点彼此太近,所以图标重叠并且它们不再区分。

我正在寻找一种算法来找到这些“彼此太近”的点,然后以不再相互重叠的方式展开它们的图标。

我在考虑径向分布,比如找到所有距离太近的点的平均中点,然后将它们相对于该点展开。

您可能知道此类问题的任何模式吗?

非常感谢。

最佳答案

以下是一些可能会解决您的问题的解决方案:

  • 使用 closest pair of points problem 的解决方案找到彼此最接近的两个图标。如果根据您的定义,最近的一对“太近”,您可以将它们彼此分开并重复此过程。

  • 使用像 k-d 树或 R-树这样的空间数据结构来存储所有的点。然后,您可以执行快速最近邻搜索以找到彼此靠近的点并将它们移开。

  • 使用 force-directed layout algorithm找到全局最小化某些能量函数的点的布局。像 Fruchterman-Reingold 这样的算法非常容易编写代码并产生良好的结果。

希望这对您有所帮助!

关于javascript - 重新排列彼此太近的点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19407578/

相关文章:

javascript - $ ("SELECTOR").css() 的复杂度

java - 通过堆叠各种 block 来 build 最高的塔?

mysql - 如何从多个表中选择一个(或零个)条目,并将这些值添加在一起以匹配特定值?

algorithm - 如果我们知道图是可 3 色的,我们可以在多项式时间内对图进行 3 色吗?

javascript - jQuery Click 事件不适用于 jCarousel

javascript - 自定义指令内 ngInit 的替代方案

html - CSS - 具有 100% 最小高度的内容创建垂直滚动条

javascript - 如何查明交易是否在 Solana 上完成

javascript - 如何在angularJS中显示来自服务器的图像

HTML 在每个打印页面上设置页脚图像