JavaScript中的graphics可视化库
我有一个数据结构，表示一个有向图，我想在HTML页面上dynamic呈现。 这些图通常只是几个节点，也许十个在高端，所以我的猜测是性能不会是一个大问题。 理想情况下，我希望能够使用jQuery将其绑定，以便用户可以通过拖动节点来手动调整布局。
注意：我不是在寻找一个图表库。
我只是把你可能要找的东西放在一起： http : //www.graphdracula.net
它是带有有向graphics布局的JavaScript，SVG，甚至可以拖动节点。 还需要一些调整，但是完全可用。 您可以使用JavaScript代码轻松创build节点和边界，如下所示：
var g = new Graph(); g.addEdge("strawberry", "cherry"); g.addEdge("cherry", "apple"); g.addEdge("id34", "cherry"); 我使用了前面提到的Raphael JS库（graffle示例），以及一些我在网上find的基于强制的graphics布局algorithm（一切开源，MIT许可证）的代码。 如果您有任何评论或需要特定的function，我可以实施它，只是问！
你也可以看看其他项目！ 以下是两个比较：
-
SocialCompare有一个广泛的库列表，“节点/边缘图”行将过滤graphics可视化。
-
DataVisualization.ch已经评估了许多库，包括节点/graphics库。 不幸的是没有直接的链接，所以你必须过滤“图”：
这是一个类似项目的列表（一些已经在这里提到）：
纯粹的JavaScript库
-
vis.js支持多种types的networking/边缘graphics，以及时间线和2D / 3D图表。 自动布局，自动聚类，弹性物理引擎，移动友好，键盘导航，层次布局，animation等。 麻省理工学院由荷兰一家专门从事自组织networking研究的公司开发。
-
Cytoscape.js – 使用移动支持的交互式graphics分析和可视化，遵循jQuery约定。 通过美国国立卫生研究院拨款资助，由@maxkfranz开发（见下面的答案 ），在几所大学和其他组织的帮助下。
-
JavaScript InfoVis Toolkit – Jit，一个交互式，多用途的graphics和布局框架。 参见例如双曲树 。 由Twitter的dataviz架构师尼古拉斯·加西亚·贝尔蒙特 （ Nicolas Garcia Belmonte）build造，2010年被Sencha收购 。
-
D3.js强大的多functionJS可视化库，Protovis的继任者。 请参阅图库中的强制graphics示例和其他graphics示例。
-
Plotly的 JS可视化库使用JS，Python，R和MATLAB绑定的D3.js。 在这里查看IPython中的nexworkx示例， 这里是人机交互示例，以及JS Embed API 。
-
sigma.js用于绘制graphics的轻量级但强大的库
-
用于创build交互式连接图的jsPlumb jQuery插件
-
Springy – 一种强制导向的graphics布局algorithm
-
Processing.js处理库的Javascript端口由John Resig提供
-
JSgraphics – 拖放通过直线连接的盒子。 线条的最小自动布局。
-
RaphaelJS的Graffle – 一个通用的多用途vector绘图库的交互式图例子。 RaphaelJS不能自动布局节点; 你需要另一个库。
-
JointJS Core – David Durman的MPL授权的开源图表库。 它可以用来创build静态图或完全交互式的图表工具和应用程序构build器。 适用于支持SVG的浏览器。 未包含在核心软件包中的布局algorithm
-
mxGraph以前是商业化的HTML 5图表库，现在可以在Apache v2.0下获得。 mxGraph是draw.io中使用的基础库。
商业图书馆
-
GoJS交互式graphics绘制和布局库
-
y文件为HTML商业graphics绘制和布局库
-
KeyLines Commercial JSnetworking可视化工具包
-
ZoomCharts商业多用途可视化库
被遗弃的图书馆
-
Cytoscape Webembedded式JSnetworking查看器（没有计划新function;由Cytoscape.js成功）
-
用于Graphvizgraphics的Canviz JS 渲染器 。 在2013年9月被遗弃 。
-
arbor.js复杂的graphics与良好的物理和眼睛糖果。 在2012年5月被遗弃。存在几个半维护的叉子。
-
jssvggraph “作为使用SVG对象的Javascript库实现的最简单的可能的强制有向图布局algorithm”。 在2012年被遗弃。
-
jsdot客户端graphics绘制应用程序。 在2011年被遗弃 。
-
Protovis可视化graphics工具包（JavaScript）。 由d3取代。
-
Moo Wheel互动JS代表连接和关系（2008）
-
JSViz 2007年代的graphics可视化脚本
-
dagre JavaScript的graphics布局
非Javascript库
-
Graphviz先进的graphics可视化语言
- Graphviz已经使用Emscripten 在这里与在线交互式演示在这里编译成Javascript
-
Flare美丽而强大的基于Flash的graphics绘制
-
NodeBox Python Graph可视化
JsVIS相当不错，但图表较大，而且自2007年以来一直被放弃。
prefuse是一套用于在Java中创build丰富的交互式数据可视化的软件工具。 flare是一个用于创build可在Adobe Flash Player中运行的可视化对象的ActionScript库，自2012年以来已放弃。
免责声明：我是Cytoscape.js的开发者
Cytoscape.js是一个HTML5graphics可视化库。 该API是复杂的，遵循jQuery约定，包括
- 查询和过滤的select器（
cy.elements("node[weight >= 50].someClass")和你所期望的一样）， - 链接（例如
cy.nodes().unselect().trigger("mycustomevent")）， - 类似jQuery的函数绑定事件，
- 元素作为集合（如jQuery有HTMLDomElements的集合），
- 可扩展性（可以添加自定义布局，用户界面，核心和收集function等），
- 和更多。
如果你正在考虑用graphics构build一个严肃的web应用程序，至less应该考虑Cytoscape.js。 它是免费的，开源的：
正如古鲁兹所说， JIT有几个可爱的graphics/树形布局，其中包括颇具吸引力的RGraph和HyperTree可视化。
另外，我刚刚在github上提出了一个超级简单的基于SVG的实现 （没有依赖关系，〜125 LOC），对于在现代浏览器中显示的小图表来说，这应该足够好用。
在商业场景中，肯定的是YFiles for HTML ：
它提供：
- 轻松导入自定义数据（ 这种交互式在线演示似乎几乎正是OP所期待的）
- 交互式编辑，通过用户手势创build和操作图表（请参阅完整的编辑器 ）
- 一个巨大的编程API，用于定制库的每个方面
- 支持分组和嵌套 （交互式以及通过布局algorithm）
- 不依赖于特定的UI工具包，但支持集成到几乎任何现有的Javascript工具包（请参阅“集成”演示 ）
- 自动布局（各种风格，如“层次”，“有机”，“正交”，“树”，“圆形”，“径向”，等等）
- 自动复杂的边缘路由（正交和有机边缘路由，避免障碍物）
- 增量和部分布局（添加和删除元素，只是稍微或根本不改变图的其余部分）
- 支持分组和嵌套（交互式以及通过布局algorithm）
- 图分析algorithm的实现 （path，集中性，networkingstream等）
- 使用HTML 5技术（如SVG + CSS和Canvas）和现代Javascript利用属性和其他更多的ES5和ES6function（但出于同样的原因将不能在IE版本8和更低版本中运行）。
- 使用模块化API，可以使用UMD装载机按需加载
这是一个示例渲染，显示了大部分请求的function：
充分披露：我为yWorks工作，但在Stackoverflow我不代表我的雇主。
