1. 首页
  2. 问题
  3. JavaScript 中的图形可视化库
小编典典

JavaScript 中的图形可视化库

all

这个问题的答案是 社区的努力。编辑现有答案以改进这篇文章。它目前不接受新的答案或交互。

我有一个表示有向图的数据结构，我想在 HTML
页面上动态呈现它。这些图通常只有几个节点，可能是最上端的十个节点，所以我的猜测是性能不会有什么大不了的。理想情况下，我希望能够将它与 jQuery
挂钩，以便用户可以通过拖动节点来手动调整布局。

注意：我不是在寻找图表库。


阅读 192

收藏
2022-03-11

共1个答案

小编典典

我刚刚把你可能要找的东西放在一起：http: //www.graphdracula.net

它是带有定向图形布局的 JavaScript、SVG，您甚至可以拖动节点。仍然需要一些调整，但完全可用。您可以使用如下 JavaScript
代码轻松创建节点和边：

var g = new Graph();
g.addEdge("strawberry", "cherry");
g.addEdge("cherry", "apple");
g.addEdge("id34", "cherry");

我使用了前面提到的 Raphael JS 库（graffle 示例）以及一些我在网上找到的基于力的图形布局算法的代码（一切都是开源的，MIT
许可证）。如果您有任何意见或需要某个功能，我可以实现它，请问！

您可能还想看看其他项目！以下是两个元比较：

  • SocialCompare有一个广泛的库列表，“节点/边缘图”行将过滤图形可视化库。

  • DataVisualization.ch 评估了许多库，包括节点/图形库。不幸的是，没有直接链接，因此您必须过滤“图表”：选择数据Visualization.ch

以下是类似项目的列表（这里已经提到了一些）：

纯 JavaScript 库

  • vis.js支持多种类型的网络/边缘图，以及时间线和 2D/3D 图表。自动布局、自动集群、弹性物理引擎、移动友好、键盘导航、分层布局、动画等。麻省理工学院由一家专门研究自组织网络的荷兰公司授权和开发。

  • Cytoscape.js - 具有移动支持的交互式图形分析和可视化，遵循 jQuery 约定。由 NIH 资助并由@maxkfranz在几所大学和其他组织的帮助下开发（见下面他的回答）。

  • JavaScript InfoVis Toolkit - Jit，一个交互式、多用途的图形绘制和布局框架。例如参见双曲树。由 Twitter dataviz 建筑师Nicolas Garcia Belmonte建造， 2010 年被 Sencha 收购。

  • D3.js强大的多功能 JS 可视化库，Protovis 的继承者。请参阅力导向图示例，以及图库中的其他图示例。

  • Plotly 的JS 可视化库使用 D3.js 与 JS、Python、R 和 MATLAB 绑定。请参阅此处的 IPython 中的 nexworkx 示例、此处的人机交互示例和JS Embed API。

  • sigma.js用于绘制图形的轻量级但功能强大的库

  • 用于创建交互式连接图的jsPlumb jQuery 插件

  • Springy - 一种力导向的图形布局算法

  • Processing.js处理库的 Javascript 端口，作者：John Resig

  • JS Graph It - 通过直线连接的拖放框。线的最小自动布局。

  • RaphaelJS 的 Graffle - 通用多用途矢量绘图库的交互式图形示例。RaphaelJS 不能自动布局节点；为此，您将需要另一个库。

  • JointJS Core - David Durman 的 MPL 许可开源图表库。它可用于创建静态图表或完全交互式图表工具和应用程序构建器。在支持 SVG 的浏览器中工作。核心包中不包含布局算法

  • mxGraph以前的商业 HTML 5 图表库，现在在 Apache v2.0 下可用。mxGraph 是 draw.io 中使用的基础库。

商业图书馆

废弃的图书馆

非 Javascript 库

2022-03-11