在d3.js中的有向无环图

Question

现在有可靠的方法在D3.js中绘制有向无环图吗？我正在尝试可视化课程中的先决条件，类似于这个链接。

我看到了一些旧答案类似的问题，其中最有希望的线索是这个hack，但它在处理更大和更复杂的数据集时效果不是很可靠。

这只是D3不理想的可视化情况之一吗？

- Chris Fritz

---

如果你的意思是没有D3中的布局可以实现这个，那么是的，确实没有。 - Lars Kotthoff

Answer 1

你可以尝试使用 dagre，这是一个用于DAG图的JS库。

如果你想出于任何原因使用d3，请查看dagre-d3。

对于更高级的方法，请查看此项目，其中使用了上述所有库。

如果d3不是必需的，还可以查看其他图形库。 ;) 2018年9月更新 有一个新库，称为d3-dag。

- MarcoL

---

我没有使用过dagre，但是在项目的其他地方正在使用D3，并且我非常喜欢它所带来的功能强大，因此我正在尝试避免添加另一个可视化库，除非绝对必要。此外，dagre-d3比完整的d3库还要大，这也让我感到不太满意。 - Chris Fritz

我明白了。dagre-d3 还包括 lo-dash，所以这可能是大小的原因。dagre 本身作为布局模块，你可以找到使用它与 d3 的方法 - 在我看来，这是最好的开源分层/有向无环图布局。 - MarcoL

@MarcoL 似乎dagre被放弃了，“该项目未得到积极开发或维护。”Dagre也是使用d3 v3构建的。是否有d3 v4的替代方案？ - Tucker

我已经更新了答案。说实话，我认为仍然值得使用dagre-d3进行分叉，并使用较新版本的d3。 - MarcoL

@Tucker/everyone - dagre 已经恢复正常运行，现在支持 d3 v4/v5。 - Sphinxxx

dagre是一个很好的建议，适合你们。 - ductridev

Answer 2

可能已经晚了，但这对于其他搜索类似信息的人可能是相关的...

Elkjs支持分层图布局，并且似乎在此时仍在积极维护。

一些基于OP用例的建议布局选项...

layoutOptions: {
        'org.eclipse.elk.algorithm': 'layered',
        'org.eclipse.elk.direction' : 'DOWN',
        'org.eclipse.elk.edgeRouting': 'SPLINES',
        'org.eclipse.elk.layered.edgeRouting.sloppySplineRouting': false,
        'org.eclipse.elk.layered.layering.strategy': 'INTERACTIVE' }

这些选项可以粘贴到交互式编辑器中，以查看布局会受到哪些影响。

- DanM

---

elkjs 的一个大问题是它使用的是 sprotty 而不是 d3，并且没有简单的“复制粘贴此代码以在您的环境中尝试”的示例。但我使用了 elkjs 的前身 - klayjs，它运行良好。它有简单的示例和 klayjs-d3 桥接。 - NtsDK

elkjs 不使用 sprotty 或 D3。它只是一个布局库。您需要通过选择渲染库（例如 sprotty、D3 等）自己进行渲染。 - Miro Spönemann

我会补充说，elkjs 可能是最好的类工作流程布局引擎之一。 - amcdnl

我使用elkjs为React构建了一个项目 - https://reaflow.io，你可能会觉得很有趣。 - amcdnl