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

Question

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

目前，他们都使用预先计算的坐标进行显示。

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

我希望使用碰撞检测（例如this example）来稍微调整图像位置，以便它们不会重叠，但尽可能保持粗糙的全局结构。

这是我到目前为止的尝试 https://gist.github.com/GerHarte/329af8ee5ffd8a1f87c5

如上图所示加载它，但是当我平移或缩放时，所有点都会大幅扩展到画布上完全不同的位置，看起来像这样，它们似乎不会重叠，但他们相距甚远。

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

更新 我跟随了Lar的回答here，稍微增加了将原始数据点设置为Lar的代码结算的位置，因为在缩放或平移时点被转换。结果看起来很棒（见下文），但是对于更多的点（5000+），它似乎在收敛到最终结果之前崩溃。

有什么建议可以通过这种方法提高效率吗？要尝试使用Multi-Foci Forced Directed方法。