使用没有 DOT 的 d3.js 的有向无环图

Question

我正在尝试使用 d3.js 绘制有向无环图。在搜索布局时，我遇到了Dagre，但它似乎用处不大，因为我不想在任何地方使用基于 DOT 的代码。如果有人知道纯 Javascript 解决方案或 DAG 的插件/自定义布局，请告诉我。提前致谢。

Answer 1

Dagre 作者在这里。 Dagre 不包含任何 graphviz 代码——它是纯 JavaScript。它基于类似的布局技术；两者都基于 Sugiyama 论文中的技术。

你可以在这里找到一些 dagre 的例子：

http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html http://cpettitt.github.io/project/dagre-d3/latest/demo/sentence-tokenization.html http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html

可以在此处找到缩小的源：http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.min.js。它的时钟频率约为 44K。

Answer 2

渲染有向无环图（并实际上突出显示有向性属性）是Sugiyama 布局算法的一个领域。

他们基本上将层（通过拓扑排序）分配给节点，然后计算层中节点的排序。首先使用简单的启发式来反转循环，这也适用于循环图。 Graphviz DOT 有一个名为dot 的布局实现，这也是它使用的文件格式的名称，所以在提到 DOT 时有时会有点混乱。

当然还有其他算法的实现，即使是交叉编译的 Javascript 版本的 dot 也是available。可用于 Javascript 的功能最完整的解决方案可能是 yFiles 库中算法的商业实现。因此，如果这是在商业场景中，您可能需要查看相应的live demo。请注意，虽然 yFiles 带有自己的渲染和编辑器实现，但您仍然可以将代码插入 d3.js，因为布局算法可以用作独立实现来“仅”计算节点的坐标，边缘连接点，弯头和标签。此特定实现支持大量附加约束，例如“端口约束”（限制传出和传入边的方向以及它们在节点上的确切位置）、分层分组节点（每个节点可以有一个父节点并且父节点“包含”它的所有子节点）、层和序列约束、边缘标记约束、不同的边缘路由样式、总线路由等等。

披露：我为创建上述库的公司工作，但是我不代表我的雇主。