检测图形边缘重叠

Question

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

到现在为止的步骤

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

针对特定图形类型（例如 Sugiyama）的某些图形布局（例如 Sugiyama）旨在减少交叉，如果有帮助（即分层布局），yfiles 中提供了类似的细胞景观布局 --> http://apps.cytoscape.org/apps/yfileslayoutalgorithms