使用d3.js而不使用DOT的定向非循环图

Question

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

Answer 1

达格尔作者在这里。 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，因为布局算法可以用作独立实现来“仅”计算节点的坐标，边缘连接点，弯道和标签。此特定实现支持大量附加约束，如“端口约束”（限制传出和传入边缘的方向以及它们在节点处的确切位置），分层分组节点（每个节点可以具有父节点）并且父节点“包含”其所有子节点），层和序列约束，边缘标记约束，不同的边缘路由样式，总线路由等。

披露：我为创建该图书馆的公司工作，但是在此我不代表我的雇主。