Javascript 如何使用碰撞检测修复d3.js中的重叠图像？

我正在尝试使用T-SNE在d3显示器上显示大量图像。预先计算x和y坐标，使用平移/缩放调整svg区域上的位置

此时，它们都使用预先计算的坐标显示

它们在缩放/平移时保持不变

我希望使用碰撞检测来稍微调整图像位置，使它们不会重叠，但尽可能保持粗略的全局结构

这是我迄今为止的尝试

通过这个加载，就像上面的图像一样，但只要我平移或缩放，所有的点都会在画布上展开到一个完全不同的位置，看起来就像这样，它们似乎没有重叠，但它们之间的距离非常远

我的代码中是否有错误，或者是否有更好的方法来解决这个问题

更新： 我遵循了Lar的回答，略微增加了将原始数据点设置为Lar代码的固定位置，因为这些点在缩放或平移时会被转换。结果看起来不错，请参见下文，但对于更多的5000+点，它似乎在最终结果收敛之前崩溃了

有什么建议可以提高这种方法的效率吗？我们将尝试多焦点强制定向方法

---

答案应该会有帮助。感谢这正是我想要的，我在原始帖子中做了一些更新，你的方法非常有效，但似乎会因为大量重叠点被推到外层而崩溃。您提到可能会有一些效率的改进，您对需要处理的领域有什么建议吗？这将是一项相当艰巨的任务-我将首先遍历所有对象，查看哪些对象与其他对象重叠，然后确定哪些重叠的对象应移动到何处。本质上，这是通过重叠对对象进行聚类，然后分别对每个集群进行操作。这不是一个下午就能很快实施的事情。