├── .gitignore ├── LICENSE ├── README.md ├── application ├── d3layout │ ├── d3collide-v3.html │ ├── d3layout-v3.html │ ├── d3layout-v4.html │ ├── js │ │ ├── app-collide-v3.js │ │ ├── app-force-v3.js │ │ ├── app-force-v4.js │ │ ├── d3.v3.min.js │ │ ├── d3.v4.min.js │ │ ├── d3.v5.min.js │ │ ├── jquery.min.js │ │ └── visgraph.min.js │ └── style │ │ ├── bootstrap │ │ ├── bootstrap.min.css │ │ ├── bootstrap.min.js │ │ └── fontawesome │ │ │ ├── css │ │ │ ├── font-awesome.css │ │ │ └── font-awesome.min.css │ │ │ └── fonts │ │ │ ├── FontAwesome.otf │ │ │ ├── fontawesome-webfont.eot │ │ │ ├── fontawesome-webfont.svg │ │ │ ├── fontawesome-webfont.ttf │ │ │ ├── fontawesome-webfont.woff │ │ │ └── fontawesome-webfont.woff2 │ │ └── style.css ├── graph │ └── README.md ├── neo4j │ └── README.md ├── network │ └── README.md ├── sna │ └── README.md └── workflow │ └── README.md ├── demo ├── README.md ├── common │ └── jquery.min.js ├── demo.html ├── images │ └── T1030001.svg ├── js │ ├── demo.js │ ├── visgraph-community.min.js │ ├── visgraph-layout.min.js │ └── visgraph.min.js └── style │ ├── bootstrap │ ├── bootstrap.min.css │ ├── bootstrap.min.js │ └── fontawesome │ │ ├── css │ │ ├── font-awesome.css │ │ └── font-awesome.min.css │ │ └── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 │ └── style.css ├── dist ├── visgraph-community.min.js ├── visgraph-layout.min.js └── visgraph.min.js └── src ├── algorithm ├── community │ └── clusterFactory.js └── layout │ └── layoutFactory.js └── visgraph └── visgraph.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs and databases # 2 | ###################### 3 | *.log 4 | 5 | # OS generated files # 6 | ###################### 7 | .DS_Store* 8 | ehthumbs.db 9 | Icon? 10 | Thumbs.db 11 | 12 | # Editor Files # 13 | ################ 14 | *~ 15 | *.swp 16 | 17 | # Gradle Files # 18 | ################ 19 | .gradle 20 | 21 | # Build output directies 22 | /target 23 | **/target 24 | /build 25 | */build 26 | */bin 27 | 28 | # IntelliJ specific files/directories 29 | out 30 | .idea 31 | *.ipr 32 | *.iws 33 | *.iml 34 | atlassian-ide-plugin.xml 35 | .idea 36 | *.iml 37 | target 38 | .settings 39 | .classpath 40 | .project 41 | 42 | 43 | # Eclipse specific files/directories 44 | .classpath 45 | .project 46 | .settings 47 | .metadata 48 | 49 | # NetBeans specific files/directories 50 | .nbattrs 51 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Hi-xiaobai 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # GraphVis 2 | 3 | ### 说明:github版本不再更新,如要使用最新版本,请转到码云查看下载 [码云Gitee](https://gitee.com/baopengdu/GraphVis)。 4 | 5 | ### 一个较为完善的图可视化引擎,支持自定义的可视化效果,集成多种经典网络布局算法,社区发现算法,路径分析算法,方便使用人员或开发者快速构建自己的图可视化分析应用。 6 | 7 | 主页:[www.graphvis.cn](http://www.graphvis.cn) 8 | 9 | 开发指南:[GraphVis开发指南](https://www.yuque.com/dashboard/docs) 10 | 11 | Gitee:[GitHub地址](https://gitee.com/baopengdu/GraphVis) 12 | 13 | ### 项目核心价值 14 | 1. 快速高效的可视化引擎,支持大量数据的交互式操作。 15 | 2. 集成大量的经典布局算法,如:树形结构类,力导向布局类,圆形类,层级关系类、节点避免重叠等 16 | 3. 支持经典社区划分算法,如:chineseWisper, lovin,newman等 17 | 4. 完整的在线应用实例,完善的开发文档(持续更新中...) 18 | 19 | ``` 20 | 活跃的交流群体,持续优化改进的可视化效果和交互,让GraphVis在未来一定会成为图数据可视化领域的一个活跃分子。 21 | 欢迎有兴趣的同学们参与进来,共同把GraphVis打造成为图数据可视化分析领域的流行组件,服务更多的开发者。 22 | ``` 23 | 24 | ### 快速使用 25 | 26 | ``` 27 | 界面原生方式引用 28 | 当前组件包支持两种引用方式: 29 | 30 | 页面标签直接引用 31 | 32 | 33 | require异步加载引用 页面标签直接引用 34 | requirejs(['visgraph','layoutFactory','clusterFactory'],function(VisGraph,layoutFactory,clusterFactory) {//do something}); 35 | 36 | ``` 37 | 38 | #### GraphVis实现图数据的可视化只需以下三步即可,无需深入的基础知识也可快速使用: 39 | 40 | ``` 41 | 1、后台服务按照格式组织数据,如: 42 | var data = { 43 | nodes:[{id:'1',label:'刘备',type:'男',properties:{age:50}}, 44 | {id:'2',label:'关羽',type:'男'}, 45 | {id:'3',label:'张飞',type:'男'}], 46 | links:[{source:'1',target:'2',label:'二弟',properties:{other:'other prop'}}, 47 | {source:'1',target:'3',label:'三弟'}] 48 | }; 49 | 50 | 2、界面添加图层包裹元素,如: 51 |
52 | 53 | 3、初始化关系图 54 | let visGraph = new VisGraph(document.getElementById('graph-panel')); 55 | visgraph.drawData(data);//绘制图完成 56 | 57 | ``` 58 | 59 | #### 支持自定义配置,实现个性化需求及交互 60 | ``` 61 | 详细配置如下,可选择性配置需要的参数,不需要无需配置 62 | let visGraph = new VisGraph(document.getElementById(visDomId), 63 | { 64 | node:{ //节点的默认配置 65 | label:{ //标签配置 66 | show:true, //是否显示 67 | color:'50,50,50',//字体颜色 68 | font:'12px 微软雅黑',//字体大小及类型 69 | wrapText:false, //节点包裹文字 70 | textPosition:'Middle_Center'//文字位置 Top_Center,Bottom_Center,Middle_Right 71 | }, 72 | shape:'circle',//节点形状 circle,rect,square,ellipse,triangle,star,polygon,text 73 | color:'20,20,200',//节点颜色 74 | //image:'images/T1030001.svg',//节点图标(设置后节点显示为圆形图标) 75 | borderColor:'255,255,20',//边框颜色 76 | borderWidth:0,//边框宽度, 77 | lineDash:[3,2],//边框虚线间隔,borderWidth>0时生效 78 | showShadow:true,//显示选中阴影 79 | shadowColor:'0,255,0',//阴影颜色 80 | alpha:1,//节点透明度 81 | size:60, //节点默认大小 82 | width:80, //节点的长度(shape为rect生效) 83 | height:40,//节点的高度(shape为rect生效) 84 | onClick : function(event,node){ //节点点击事件回调 85 | // do something 86 | console.log('click node----['+node.id+':'+node.label+']'); 87 | } 88 | }, 89 | link:{ //连线的默认配置 90 | label:{ //连线标签 91 | show:false, //是否显示 92 | color:'20,20,20', //字体颜色 93 | font:'11px 微软雅黑'//字体大小及类型 94 | }, 95 | lineType:'direct',//连线类型,direct,curver,vlink,hlink,bezier,vbezier,hbezier 96 | colorType:'defined',//连线颜色类型 source:继承source颜色,target:继承target颜色 both:用双边颜色,defined:自定义 97 | color:'180,180,180', //连线颜色 98 | alpha:1, // 连线透明度 99 | lineWidth:5, //连线宽度 100 | lineDash:[0],//虚线间隔样式如:[5,8] 101 | showArrow:true,//显示箭头 102 | onClick :function(event,link){ //连线点击事件回调 103 | // do something 104 | console.log('click link---['+link.source.id+'-->'+link.target.id+']'); 105 | } 106 | }, 107 | highLightNeiber:true, //相邻节点高亮开关 108 | backGroundType:'png',//保存图片的类型,支持png、jpeg 109 | wheelZoom:0.8,//滚轮缩放开关,不使用时不设置[0,1] 110 | marginLeft:-40, //对右键菜单位置进行调校的参数 111 | rightMenu:{ 112 | nodeMenu:NodeRightMenu, //节点右键菜单配置 113 | linkMenu:LinkRightMenu // 连线右键菜单配置 114 | } 115 | } 116 | ); 117 | ``` 118 | 119 | ## 应用效果图 120 | 121 | ![]() |
124 | ![]() |
125 |
![]() |
128 | ![]() |
129 |
![]() |
132 |
![]() |
139 | ![]() |
140 |
节点形状 | 80 |81 | 90 | | 91 |
节点标签 | 94 |95 | 99 | | 100 |
标签包裹 | 103 |104 | 108 | | 109 |
标签位置 | 112 |113 | 120 | | 121 |
连线类型 | 124 |125 | 136 | | 137 |
连线样式 | 140 |141 | 145 | | 146 |
连线标签 | 149 |150 | 154 | | 155 |
连线箭头 | 158 |159 | 163 | | 164 |
父节点数 | 214 |215 | 220 | | 221 |
子节点数 | 224 |225 | 229 | | 230 |
节点形状 | 80 |81 | 90 | | 91 |
节点标签 | 94 |95 | 99 | | 100 |
标签包裹 | 103 |104 | 108 | | 109 |
标签位置 | 112 |113 | 120 | | 121 |
连线类型 | 124 |125 | 136 | | 137 |
连线样式 | 140 |141 | 145 | | 146 |
连线标签 | 149 |150 | 154 | | 155 |
连线箭头 | 158 |159 | 163 | | 164 |
父节点数 | 214 |215 | 220 | | 221 |
子节点数 | 224 |225 | 229 | | 230 |
节点形状 | 80 |81 | 90 | | 91 |
节点标签 | 94 |95 | 99 | | 100 |
标签包裹 | 103 |104 | 108 | | 109 |
标签位置 | 112 |113 | 120 | | 121 |
连线类型 | 124 |125 | 136 | | 137 |
连线样式 | 140 |141 | 145 | | 146 |
连线标签 | 149 |150 | 154 | | 155 |
连线箭头 | 158 |159 | 163 | | 164 |
父节点数 | 214 |215 | 220 | | 221 |
子节点数 | 224 |225 | 229 | | 230 |
聚类效果 | 84 |85 | 89 | | 90 |
区域重叠 | 93 |94 | 98 | | 99 |
节点形状 | 126 |127 | 136 | | 137 |
节点标签 | 140 |141 | 145 | | 146 |
标签包裹 | 149 |150 | 154 | | 155 |
标签位置 | 158 |159 | 166 | | 167 |
连线类型 | 170 |171 | 182 | | 183 |
连线样式 | 186 |187 | 191 | | 192 |
连线标签 | 195 |196 | 200 | | 201 |
连线箭头 | 204 |205 | 209 | | 210 |
父节点数 | 260 |261 | 266 | | 267 |
子节点数 | 270 |271 | 275 | | 276 |