JavaScript中的图形可视化库
Chr*_*mer 525 javascript jquery graph-layout data-structures
我有一个表示有向图的数据结构,我想在HTML页面上动态呈现它.这些图通常只是几个节点,可能只有十个节点,所以我的猜测是性能不会是一个大问题.理想情况下,我希望能够使用jQuery将其挂钩,以便用户可以通过拖动节点来手动调整布局.
注意:我不是在寻找图表库.
Joh*_*sen 895
我刚刚把你想要的东西放在一起: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已经评估了许多库,包括节点/图形库.很遗憾,没有直接链接,因此您必须过滤"图表":
这是一个类似项目的列表(这里已经提到了一些):
纯JavaScript库
vis.js支持多种类型的网络/边缘图,加上时间轴和2D/3D图表.自动布局,自动聚类,弹性物理引擎,移动友好,键盘导航,分层布局,动画等.麻省理工学院由一家专门从事自组织网络研究的荷兰公司授权和开发.
Cytoscape.js - 遵循jQuery约定的移动支持的交互式图形分析和可视化.通过NIH拨款资助,由@maxkfranz(见下面的答案)在几所大学和其他组织的帮助下开发.
JavaScript InfoVis Toolkit - Jit,一个交互式,多用途的图形绘制和布局框架.参见例如双曲树.由Twitter dataviz建筑师Nicolas Garcia Belmonte建造并于2010年被Sencha收购.
Plotly的 JS可视化库使用带有JS,Python,R和MATLAB绑定的D3.js.见IPython的一个nexworkx例子在这里,人际交往例如这里,和JS API嵌入.
sigma.js用于绘制图形的轻量级但功能强大的库
jsPlumb jQuery插件,用于创建交互式连接图
Springy - 力导向图布局算法
Processing.js John Resig的Processing库的Javascript端口
JS Graph It - 通过直线连接拖动框.最小的线条自动布局.
RaphaelJS的Graffle - 通用多功能矢量绘图库的交互式图形示例.RaphaelJS无法自动布局节点; 你需要另一个图书馆.
JointJS Core - David Durman的MPL许可开源图表库.它可用于创建静态图表或完全交互式图表工具和应用程序构建器.适用于支持SVG的浏览器.布局算法未包含在核心包中
mxGraph以前是商业HTML 5图表库,现在可以在Apache v2.0下使用.mxGraph是在所用的碱库draw.io.
商业图书馆
GoJS交互式图形绘制和布局库
yFiles for HTML商业图形绘制和布局库
KeyLines Commercial JS网络可视化工具包
ZoomCharts商业多功能可视化库
Syncfusion JavaScript Diagram用于绘图和可视化的商业图库.
被遗弃的图书馆
Cytoscape Web嵌入式JS网络查看器(没有计划新功能; Cytoscape.js成功)
jssvggraph "最简单的力导向图布局算法,实现为使用SVG对象的Javascript库".在2012年被遗弃.
用于可视化的Protovis图形工具包(JavaScript).由d3取代.
用于连接和关系的Moo Wheel Interactive JS表示(2008)
JSViz 2007年代图形可视化脚本
dagre JavaScript的图形布局
非Javascript库
- 是的,有定向的边缘是可能的!使用g.addEdge("cherry","apple",{"directed":true}); (4认同)
- 是否有任何yFILES布局算法的开源替代方案？例如https://www.yworks.com/products/yfiles-layout-algorithms-for-cytoscape (2认同)
max*_*anz 45
免责声明:我是Cytoscape.js的开发人员
Cytoscape.js是一个HTML5图形可视化库.API很复杂,遵循jQuery约定,包括
- 用于查询和过滤的选择器(
cy.elements("node[weight >= 50].someClass")按照您的预期进行操作), - 链接(例如
cy.nodes().unselect().trigger("mycustomevent")), - 用于绑定事件的类jQuery函数,
- 元素作为集合(如jQuery具有HTMLDomElements的集合),
- 可扩展性(可以添加自定义布局,UI,核心和集合功能等),
- 和更多.
如果你正在考虑使用图表构建一个严肃的webapp,你至少应该考虑使用Cytoscape.js.它是免费和开源的:
- 所有API都有完整的文档.文档甚至引导您完成入门(即init).还有*个*运行的各个API示例,还有现场演示.该功能远远超过任何JS图形库,文档比大多数项目更广泛 - 无论是商业还是开源.文档中究竟缺少什么？ (6认同)
- 好的,对不起我的坏.我看起来不太合适.是的,它有很好的记录. (3认同)
Sam*_*les 35
JsVIS相当不错,但是随着图表的增加而变慢,并且自2007年以来就被放弃了.
prefuse是一组用于在Java中创建丰富的交互式数据可视化的软件工具.flare 是一个ActionScript库,用于创建自2012年以来放弃的Adobe Flash Player中运行的可视化.
- -1 - prefuse是Java,而不是JavaScript.Flare是Flash,也不是JavaScript.JsVIS有缺陷和过时. (22认同)
- 这些图书馆现在看起来有点老了,人们今天使用的是什么？我特别关注绘制独立的xy系列. (2认同)
- -1 downvoting减少过时答案的意义 (2认同)
- @animuson:另一个主题之一:OP要求使用JavaScript库.答案中唯一关于JS的部分是自2007年以来尚未开发的库. (2认同)
在商业场景中,一个严肃的参赛者肯定是yFiles for HTML:
它提供:
- 轻松导入自定义数据(这个交互式在线演示似乎几乎完全符合OP的要求)
- 通过用户手势创建和操作图表的交互式编辑(请参阅完整的编辑器)
- 一个巨大的编程API,用于自定义库的每个方面
- 支持分组和嵌套(交互式,以及布局算法)
- 不依赖于特定的UI工具包,但支持集成到几乎任何现有的Javascript工具包中(请参阅"集成"演示)
- 自动布局(各种风格,如"层次","有机","正交","树","圆形","径向"等)
- 自动复杂的边缘路由(正交和有机边缘路由,避障)
- 增量和部分布局(添加和删除元素,仅略微或根本不更改图的其余部分)
- 支持分组和嵌套(交互式,以及布局算法)
- 的实施方式中图形分析算法(路径,中心性,网络流,等等)
- 使用SVG + CSS和Canvas等HTML 5技术和现代Javascript利用属性以及其他更多ES5和ES6功能(但出于同样的原因,不会在IE 8及更低版本中运行).
- 使用可以使用UMD加载器按需加载的模块化API
下面是一个示例渲染,显示了大多数请求的功能:
完全披露:我为yWorks工作,但在Stackoverflow上,我不代表我的雇主.
- 最好的算法集合,但也是最封闭的,使其无法在开源项目中使用:-( (3认同)
- @FélixSaparelli：相信我：我愿意。您所描述的是可能的，并且之前已经做过类似的事情。您正在链接到标准许可条款，但是当然可以达成自定义协议。但是，这不是讨论此问题的正确位置。随时直接与yWorks联系。 (2认同)