几个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