寻找布局算法

Question

我正在使用 Linkurious 的 sigma.parsers.cypher.js 插件，它似乎通过相当难以想象地分配 x 和 y 坐标随机值来将节点布置在视口上其中，如果有足够多的节点，基本上会造成不可读的混乱——Neo 服务器中内置的图形生成做得更好。

考虑到这一点，一个更好地布局的算法可以像这样工作：

1. 选择图中的第一个节点并将其定位在 (0,0)
2. 选择所有直接相关的节点并将它们放置在{minimum 距离父节点的距离
3. 如果任何两个兄弟姐妹的距离小于{最小距离}，则增加与父节点的距离，直到兄弟姐妹可以充分分开
4. 为每个兄弟执行上述步骤 2 和 3

但我想知道有什么我可以利用的东西，这样我就不必从头开始编写功能了吗？

* 更新我 *

也许 2) 选择所有 (无子) 直接相关的节点...然后 2a) 有子节点的子节点应放置在两倍距离 + 兄弟节点直径的位置（这为其子节点留出了空间）

* 更新二 *

如果圆的半径是 {minimum distance} 并且无子节点的数量超出了我们的范围，我们可以：1）增加半径直到所有节点都适合，或者 2）创建第二层

Answer 1

所以对于图形布局，很多人使用d3 force directed layout 或相同的一些调整变体。我不确定 neo4j 浏览器是否使用 d3，但那里的图形显示对我来说似乎是一个强制导向的变体。

图形可视化是一个非常深奥的话题，而且还有很多。要查看可能的示例，请仔细阅读d3 gallery。

编辑虽然我对 sigma.js 不太熟悉，但我认为在 sigma land 中相当于forceAtlas2。

我无法评论您的具体算法；听起来可能是合理的，但对我来说，真正的问题是，“你如何利用你正在处理的数据的语义来呈现一个合理的布局”？例如，我处理大量基于时间的图形数据。因此，我们使用强制导向的布局，而不是在同心圆中显示事物，将连接良好的事物放在中心，其他事物向外推，我们倾向于将事物与数据的时间方面一起从左向右流动。这对我们有用，因为我们知道所有节点中的时间戳属性是什么，并且我们知道在这个域中，时间元素非常有意义。

如果您有地理数据，那么强制导向可能不是一个好主意，您宁愿在地图上绘制内容。如果你有社交网络数据，也许你想把它放在像 Lady Gaga 这样的“超级节点”周围，以显示谁在网络中最受欢迎。

所有这一切的关键在于它取决于。如果不了解数据的语义和底层领域，很难说你的可视化想法是否好。我认为强制定向布局是一个合理的默认设置，然后再进行自定义。它们并没有真正针对任何特定领域进行定制，这使得它们在大多数情况下都还可以，但对于真正的任何事情来说都不是很好。

但归根结底，有大量的 javascript 框架可以为您实现十几种不同的算法。您最好从 d3 或类似的起点开始调整，我完全不建议您自己实现您选择的算法，而是将其作为对现有布局引擎的一组配置调整。