从javascript中的边列表制作有向图

Posted 2023-02-23

【中文标题】从javascript中的边列表制作有向图

【英文标题】：Making a directed graph from a list of edges in javascript

【发布时间】：2013-03-08 01:22:23

【问题描述】：

我有一个从键到值的边缘列表

所以a => [x,y,z] 表示a 连接到x、y 和z

我有一个很长的列表，我想将其可视化，最好使用 javascript。

有哪些已知的 javascript 包可以轻松完成这项工作（输入边，通过 javascript 输出图）

【问题讨论】：

你可以尝试用canvas自己绘制

类似话题：***.com/questions/1448319/…

arborjs.org 可以满足您的要求。

另外结帐***.com/questions/4646152/… - 他们推荐了jsPlumb (jsplumb.org/jquery/demo.html)。

【参考方案1】：

我强烈推荐d3.js，该API 非常直观，并且在可视化数据方面做得非常出色。一些示例输出可用here (d3noob.org) 和here (bl.ocks.org)。

从 d3noob.org here 获得创建有向图的基本演练。

【参考方案2】：

您可以尝试 Cytoscape.js。它是 Javascript 中的图形分析和可视化库。 http://cytoscape.github.com/cytoscape.js/

它甚至支持带有端点标记（即箭头）的边，这对于有向图很有用。

免责声明：我参与了 Cytoscape.js。