使用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 时有时会有点混乱。

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

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