JavaScript中的图形可视化库

JavaScript

猴子NearJinJin

2020-03-12

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

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

第1111篇《JavaScript中的图形可视化库》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
古一老丝宝儿 2020.03.12

在商业场景中，可以肯定的是，认真的竞争者是yFiles for HTML：

它提供：

  • 轻松导入自定义数据（此交互式在线演示似乎可以完全满足OP的要求）
  • 交互式编辑，用于通过用户手势创建和操作图（请参见完整的编辑器）
  • 庞大的编程API，可自定义库的各个方面
  • 支持分组和嵌套（既可交互，也可通过布局算法）
  • 不依赖于特定的UI工具包，但是支持集成到几乎所有现有的Javascript工具包中（请参阅“集成”演示）
  • 自动布局（各种样式，例如“分层”，“有机”，“正交”，“树”，“圆形”，“径向”等）
  • 自动进行复杂的边缘铣削（具有避障功能的正交和有机边缘铣削）
  • 增量和部分布局（添加和删除元素，仅略微改变或根本不改变其余图）
  • 支持分组和嵌套（既可交互，也可通过布局算法）
  • 的实施方式中图形分析算法（路径，中心性，网络流等）
  • 使用诸如SVG + CSS和Canvas之类的HTML 5技术以及利用属性和其他更多ES5和ES6功能的现代Javascript（但出于同样的原因，将无法在IE 8及更低版本中运行）。
  • 使用模块化API，可以使用UMD加载程序按需加载

这是显示大多数所需功能的示例渲染：

BPMN演示创建的示例渲染的屏幕快照。

全面披露：我为yWorks工作，但是在Stackoverflow上我不代表我的雇主。

Mandy番长 2020.03.12

JsVIS相当不错，但是随着较大的图形速度变慢，并且自2007年以来已被放弃。

prefuse是用于在Java中创建丰富的交互式数据可视化效果的一组软件工具。flare 是一个ActionScript库，用于创建可在Adobe Flash Player中运行的可视化效果，该功能自2012年以来已被废弃。

StafanMandy 2020.03.12

正如guruz所提到的，JIT具有几种可爱的图形/树布局，包括颇具吸引力的RGraph和HyperTree可视化。

另外，我刚刚在github上提出了一个基于SVG的超级简单的实现（无依赖项，〜125 LOC），对于在现代浏览器中显示的小图来说应该足够好了。

村村凯 2020.03.12

免责声明：我是Cytoscape.js的开发人员

Cytoscape.js是HTML5图形可视化库。该API非常复杂，并遵循jQuery约定，包括

  • 用于查询和过滤的选择器（可以cy.elements("node[weight >= 50].someClass")完成很多工作），
  • 链接（例如cy.nodes().unselect().trigger("mycustomevent")），
  • 类似jQuery的用于绑定事件的函数，
  • 元素作为集合（例如jQuery具有HTMLDomElements的集合），
  • 可扩展性（可以添加自定义布局，UI，核心和集合功能等），
  • 和更多。

如果您正在考虑使用图形构建严肃的Web应用程序，则至少应考虑Cytoscape.js。它是免费和开源的：

http://js.cytoscape.org

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android