检测图边缘重叠

Question

问题：寻找一个 js 图形库来创建有向图（例如使用 dagre 布局），具有不重叠的约束边缘。

到目前为止的步骤

1. 以cytoscape.js 开头，但作为it seems，不存在这样的功能。
2. 继续使用基于 svg 的解决方案（考虑到所有元素都在 DOM 中），d3.js 使用 dagre-d3，但 DOM 中的信息仍然是路径路由。

目标

1. 找到一种检测边缘重叠的方法，基于canvas 或svg。
2. 创建自定义布局以遵守此约束。将使用它作为我的收敛算法的指标。

图形表示

在目标的图形表示下方。 我想检测边缘0>1 和2>3 是否重叠。

欢迎任何想法，想法。 如果我的逻辑有问题，我们非常欢迎更正/建议。

Answer 1

寻找边缘交叉点（线交叉点）是一个相当简单的几何图形，在这里进行了解释 --> https://stackoverflow.com/a/18234609/368214

但是最小化图中这样的边交叉（零边交叉只在平面图中才有可能）是图布局的巨大研究挑战之一 - https://cs.stackexchange.com/questions/14901/how-to-reduce-the-number-of-crossing-edges-in-a-diagram

一些特定图形类型的图形布局，如 DAGS，如 Sugiyama，旨在减少交叉，如果有帮助（即分层布局），yfiles 提供了类似的 cytoscape 布局--> http://apps.cytoscape.org/apps/yfileslayoutalgorithms