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

posted @   harrychinese  阅读(6291)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
点击右上角即可分享
微信分享提示