问题标签 [dagre]

我觉得我已经查看了堆栈溢出中的所有 git 存储库和帖子，并且干了起来……我正在寻找一种以图形方式显示联谊会家谱的方法。是什么让这个问题变得独特，并且让我感到不安的是 dagre 不再有 rank 工作，因为我需要以下节点条件：

• 一个节点可以有多个父节点（大节点）
• 一个节点可以有多个孩子（小）
• 一个节点被分配一个等级（类）来表示它们何时交叉
• 一个节点可以有来自不同类的连接（从不同类中获取两个小节点）

我一直在从我们的数据库中做一些工作表来自动化这个过程，但我想要一些可以缩放和滚动的东西，如果你点击树的节点，我还可以添加更多细节。

有多个 JavaScript 库（例如Dagre.js、Cola.js）用于计算DAG（有向无环图）布局；即，计算节点和链接的坐标以最小化链接的总长度和交叉链接的数量。

在我们的 Web 应用程序中，我们使用Dagre.js来计算 DAG 的布局，具有以下规范：

• 可能有一个或多个根。
• DAG(s) 从左到右生长，所以根应该总是在左边。
• DAG 很大（大约 1,000 个节点）。
• 所有节点的宽度相同，但高度不同。
• 节点是集群的。

我编写了这个 CodeSandbox来生成随机 DAG 并展示Dagre.js有多慢。笔记：

• 默认情况下，它会生成一个包含 100 个节点的随机 DAG。您可以通过修改第 17 行 ( let nodes = 100;) 来更改音符的数量。
• 在第 56 行计算完布局后，您会看到将单个节点添加到图中所花费的时间与第一次计算布局所花费的时间几乎相同。这使得在浏览器中与大型 DAG 进行交互几乎是不可能的。

问题：我们如何更有效地计算 DAG(s) 布局？

我正在使用 Dagre 和 React-flow 创建组件树可视化，不幸的是我遇到了一些困难。边缘是正确的，都有正确的源和目标标识符，但是如果我不使用Handle提供的组件react-flow-renderer，将不会出现手柄（小点，边缘的连接点）。即使我设置元素targetPosition和sourcePosition. 我想el.targetPosition，el.sourcePosition什么也不做。下面的大部分实现来自 React-flow 官网，它们不使用Handle组件。句柄 ID 为空。

您还可以在下面找到快照。

1. 渲染元素

2. 其余代码