几个js 拓扑图库
计划做一个元数据平台, 因为要包含血缘分析功能, 所以要调研一下js 拓扑图库, 候选对象主要参考知乎上的问答, javascript 有哪些适合做网络拓扑图形展示的包?
https://www.zhihu.com/question/20643359
------------------------
候选库
------------------------
yfiles for html
(收费)是德国人搞的,很严谨,布局算法很厉害, http://live.yworks.com/yfiles-for-html/2.0/view/graphviewer/index.html
那个公司还有另一个牛逼产品 yEd
mxGraph , JavaScript Diagramming and Graph Visualization
(开源) 是jgraph的html版本,支持低版本的IE是亮点, https://github.com/jgraph/mxgraph
qunee for html5 , 开发清新、高效的图形组件
(收费) 国人研发,简洁、高效、用户体验好, http://qunee.com/
jTopo (Javascript Topology library), 是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包
jTopo(免费) 关注于数据的图形展示,它是面向开发人员的,需要进行二次开发。http://www.jtopo.com/download.html
d3-force, 基于d3 的一个库
d3-force(开源) https://github.com/d3/d3-force
dagre-d3, 另一个基于d3 的一个库, 该github上说开发已经停止了, https://github.com/cpettitt/dagre-d3, airflow调度系统用它显示 pipeline 的flow图
------------------------
选择
------------------------
当然是要选免费的了, 首选 mxGraph, 样子很漂亮, 文档详尽, 而且从2006年开始一直活跃开发中. jTopo也算不错.
mxGraph几个有特点是的例子,
带图标 https://jgraph.github.io/mxgraph/javascript/examples/fileio.html
定制化图标位置的示例, https://jgraph.github.io/mxgraph/javascript/examples/fixedicon.html
鼠标右键菜单, https://jgraph.github.io/mxgraph/javascript/examples/events.html
更完整的右键菜单, https://jgraph.github.io/mxgraph/javascript/examples/schema.html
点击node/edge能在属性页签上显示其属性, https://jgraph.github.io/mxgraph/javascript/examples/userobject.html
变换布局, https://jgraph.github.io/mxgraph/javascript/examples/graphlayout.html
node 上label显示的位置, https://jgraph.github.io/mxgraph/javascript/examples/labelposition.html
node上动态显示alarm, https://jgraph.github.io/mxgraph/javascript/examples/monitor.html
在图标下方出现context icon按钮, https://jgraph.github.io/mxgraph/javascript/examples/contexticons.html
隐藏和显示节点, (这个例子帮助我们实现search功能, 找到一个node, 然后设置style) https://jgraph.github.io/mxgraph/javascript/examples/visibility.html
动画edge流向图, https://jgraph.github.io/mxgraph/javascript/examples/animation.html
zoom-in/zoom-out, https://jgraph.github.io/mxgraph/javascript/examples/handles.html
几个js 拓扑图库的更多相关文章
- 推荐一个很棒的JS绘图库Flot
Flot是Ole Laursen开发的基于JQuery的纯JavaScript实现的绘图库,Flot使用起来非常简单,绘图效果相当绚丽,而且还支持一些图片的操作功能,例如图片的缩放.可以看一下Flot ...
- vis.js绘图库的一个BUG以及源码修正
1. BUG 1.1 BUG触发情况 在使用vis.js绘图时,加入两个节点A和B之间既存在一条从A指向B的边,同时也存在一条从B指向A的边,那么这个绘图库就会崩溃. 1.2 BUG解析 vis.js ...
- 开源轻量级移动端友好的JS地图库——leaflet学习教程
Leaflet 是一个为建设交互性好适用于移动设备地图,而开发的现代的.开源的 JavaScript 库.代码仅有 33 KB,但它具有开发在线地图的大部分功能.Leaflet设计坚持简便.高性能和可 ...
- js关系图库:aworkflow
auto-workflow 用于快速构建各种关系图的库,比如流程图,可视化执行流等 github地址:https://github.com/auto-workflow/AWorkflow 快速开始 n ...
- HTML5 Canvas JavaScript库 Fabric.js 使用经验
首先,表明我的态度:采用 Flash 才是最优方案,不建议使用 HTML 5 的 Canvas 做一些生产/工业级的网页应用. Flash的优势一是浏览器支持好,二是代码成熟稳定.而HTML5 的 C ...
- 【前端vue进阶实战】:从零打造一个流程图、拓扑图项目【Nuxt.js + Element + Vuex】 (一)
本系列教程是用Vue.js + Nuxt.js + Element + Vuex + 开源js绘图库,打造一个属于自己的在线绘图软件,最终效果:topology.le5le.com .如果你觉得好,欢 ...
- myfocus官方网站已经挂掉,相关下载已经从googlecode转到网盘
首先说,我跟作者没有任何关系,只是偶然发现这个东西,努力了1个多小时才有下载,现在友情提供出来. 其次,我找到的是v2.0.4 MS这个是最新的版本,更新日期是2012年10月. 再次,本文原本是准备 ...
- 前端可视化建模技术概览,包括:GoJS
我推荐使用的: 库 网址 备注 GoJS https://gojs.net/latest/samples/flowchart.html 推荐使用 相关文章: 前端可视化建模技术概览:http://le ...
- javascript开源大全
javascript开源大全 Ajax框架-jQuery 可视化HTML编辑器-CKEditor 国产jQuery-UI框架-(jUI)-DWZ 网页开发FireFox插件-Firebug 服务器端的 ...
随机推荐
- VSIX 插件右键菜单(2)
编译项目然后发布 // 获取当前右击的活动项目 EnvDTE.Project activeProj = ProjectHelpers.GetActiveProject(); // 获取 编译选项 Re ...
- [APIO/CTSC 2007]数据备份(贪心+堆)
你在一家 IT 公司为大型写字楼或办公楼(offices)的计算机数据做备份.然而数据备份的工作是枯燥乏味的,因此你想设计一个系统让不同的办公楼彼此之间互相备份,而你则坐在家中尽享计算机游戏的乐趣. ...
- Linux的wget命令详解【转载】
Linux wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,尤其对于网络管理员,经常要下载一些软件或从远程服务器恢复备份到本地服务器.如果我们使用虚拟主机,处理这样的 ...
- poj3614 Sunscreen
贪心题. 如何找出正确的贪心策略呢? 我一开始是以为按照l排序,然后从1到n遍历,挑最大的满足的防晒霜.后来发现不行.挑最小的也不行. 看了题解发现是从n到1遍历. 为什么? 因为i-1的l比i的l承 ...
- bzoj1398 Necklace
关于最小表示法的模板题. 最小表示法:把一个字符串表示为它的的所有循环同构字符串中的字典序最小者. 直接参见代码中的函数getmin()获取精髓 #include <cstdio> #in ...
- (九)逻辑运算,order by,desc
逻辑运算 AND,OR,NOT ......where 表达式1 and 表达式2: ......where 表达式2 and 表达式1: SQL优化: SQL在解析where时是从右向左解析的. ...
- JAVA概述 也许你会豁然开朗
1.JDK:Java Development Kit,java的开发和运行环境,java的开发工具和jre. 2.JRE:Java Runtime Environment,java程序的运行环境,ja ...
- JS事件(五)内存与性能
1.减少代码中事件处理程序的数量,是减少内存开销,提升网页速度的有效手段 事件委托: <ul id="ul"> <li id="goSomewhere& ...
- Unity 后处理堆
Unity安装后处理的过程:windows---PacageManager---Post Processing Post Processing后处理堆需要知道要修改那个相机渲染的内容,先定位到相机,再 ...
- 温故知新 —— Floyd算法
什么?Floyd?sb O(n ^ 3) 算法早不用了,右上角红叉吧.我之前虽然也认识过 Floyd 算法的重要性,不过多少也是这么想的.然而最近三天连续 rand 到了好几道有关的题目,让我彻底重新 ...