需要做一个树形图,可以查看各个人员的关系。
可伸缩的力引导图-失败
刚开始,打算做一个可展开和伸缩的,搜索时候发现CSDN有一篇美美哒程序媛写的Echarts Force力导向图实现节点可折叠。
这里放上前辈的代码
/** 这段代码来自 http://blog.csdn.net/r4NqiAn/article/details/48320487 Echarts-Force 力导向布局图树状结构实现节点可折叠效果 作者:Reese 日期:2015-09-09 版本:V0.1 功能:点击一次节点,展开一级子节点;再次点击节点,折叠所有子孙节点; 弹出最终子节点的标签 备注:在使用该方法的时候,在nodes的属性里要自定义flag属性,并设置ignore */ var ecConfig = require(‘echarts/config‘); function openOrFold(param){ var linksNodes=[];//中间变量 var data=param.data;//表示当前选择的某一节点 var option = myChart.getOption();//获取已生成图形的Option var nodesOption=option.series[0].nodes;//获得所有节点的数组 var linksOption=option.series[0].links;//获得所有连接的数组 var categoryLength=option.series[0].categories.length;//获得类别数组的大小 /** 该段代码判断当前节点的category是否为最终子节点, 如果是,则弹出该节点的label */ if(data.category==(categoryLength-1)){ alert(data.label); } /**判断是否选择到了连接线上*/ if(data != null && data != undefined){ /** 判断所选节点的flag 如果为真,则表示要展开数据, 如果为假,则表示要折叠数据 */ if (data.flag) { /** 遍历连接关系数组 最终获得所选择节点的一层子节点 */ for(var m in linksOption){ //引用的连接关系的目标,既父节点是当前节点 if(linksOption[m].target==data.id){ linksNodes.push(linksOption[m].source);//获得子节点数组 } }//for(var m in linksOption){...} /** 遍历子节点数组 设置对应的option属性 */ if(linksNodes != null && linksNodes != undefined){ for(var p in linksNodes){ nodesOption[linksNodes[p]].ignore = false;//设置展示该节点 nodesOption[linksNodes[p]].flag = true; } } //设置该节点的flag为false,下次点击折叠子孙节点 nodesOption[data.id].flag = false; //重绘 myChart.setOption(option); }else{ /** 遍历连接关系数组 最终获得所选择节点的所有子孙子节点 */ for(var m in linksOption){ //引用的连接关系的目标,既父节点是当前节点 if(linksOption[m].target==data.id){ linksNodes.push(linksOption[m].source);//找到当前节点的第一层子节点 } if(linksNodes != null && linksNodes != undefined){ for(var n in linksNodes){ //第一层子节点作为父节点,找到所有子孙节点 if(linksOption[m].target==linksNodes[n]){ linksNodes.push(linksOption[m].source); } } } }//for(var m in linksOption){...} /** 遍历最终生成的连接关系数组 */ if(linksNodes != null && linksNodes != undefined){ for(var p in linksNodes){ nodesOption[linksNodes[p]].ignore = true;//设置折叠该节点 nodesOption[linksNodes[p]].flag = true; } } //设置该节点的flag为true,下次点击展开子节点 nodesOption[data.id].flag = true; //重绘 myChart.setOption(option); }//if (data.flag) {...} }//if(data != null && data != undefined){...} }//function openOrFold(param){...} myChart.on(ecConfig.EVENT.CLICK, openOrFold);
看了一下,思路很清晰。然后开始做,发现她的这代码有个问题就是折叠如果多层会有折叠不上的情况,也可能是我自己代码的原因。
需注意
1.在Echarts3中没有ignore属性,我发现data[].category如果对应值不存在的话,就会不显示节点,所以,再点击的时候设置子节点 x.category=x.category*-1;就可隐藏,显示时候同样反转就行。有需要特殊隐藏稍加一点判断就行。
nodesOption[linksNodes[p]].category = nodesOption[linksNodes[p]].category*-1;
2.不用多加自定义属性去折叠了,隐藏了就折叠了,但是得获取到递归获取到所有子id。这里还有些残留的代码片段
//先判断是要展开还是闭合:如果有一个category为正,则闭合;否则扩展一层 。 expend=true; for ( var p in linksNodes) { if(nodesOption[linksNodes[p]].category>0 ){ //&& !is_exist(linksOption,nodesOption,nodesOption[linksNodes[p]].id) expend=false; nodesOption[linksNodes[p]].category=Math.abs(nodesOption[linksNodes[p]].category)*-1; } nodesOption[linksNodes[p]].category=Math.abs(nodesOption[linksNodes[p]].category)*-1; //顺便使所有的值一致,全置为负值。因为关闭全关闭,展开只展开一层(特例)下面做处理就好、 //console.log(p+‘:‘+nodesOption[linksNodes[p]].category) } if(expend){ //展开 一层 linksNodeArrs=[]; linksNodes_in=get_id(linksOption,data.id,0); //console.log(linksNodes_in) for ( var p in linksNodes_in) { nodesOption[linksNodes_in[p]].category = nodesOption[linksNodes_in[p]].category*-1; } }else{ //闭合不需要做处理 } //递归取所有 id function get_id(arr,cId,f=1){ for ( var m in arr) { if (arr[m].source == cId) { linksNodeArrs.push(arr[m].target); //linksNodeArrs.push(m); //console.log(arr[m].target); if(f) get_id(arr,arr[m].target); } } return linksNodeArrs; }
图一为简单的扩展折叠,完美
图二为有问题的折叠,点击[设计师B]时,[项目1]和[厂商D]应该存在,因为还有别的路径,逻辑错误,这里要弄折叠肯定得通过有向图比较好解决。不过这里暂时用不到,以后有机会填此坑。
那么,不考虑折叠了,考虑单击出相关一级子节点,双击只显示此节点的第一级。
可扩展,以及单独显示的力引导图
为了以后需要查数据库动态获取数据,所以暂时把关系都存到数据库里。主要有两组数据,一组是每个节点(数据),一组是他们的关系即连接线 。有人可能会想,这想一种数据结构,对,这就是有向图 :
扯回来,代码只是演示相关功能并不完善,这里将不详细介绍各代码,只是简单的取数据库而已,Echarts基础请看官方文档和技术文章。
数据库简单设计三个,categories各分类,nodes数据节点,links边(可以看到保存了关系)
TP代码:
#查询最基本的显示 public function index(){ ####分类查询#### $category=M(‘categories‘)->field(‘name‘)->where(‘name is not null‘)->order(‘id asc‘)->select();//注:需要从0排起 //legend,页顶部的标签 -可空 $legend_data=‘ ‘; foreach($category as $v){ $legend_data.="‘{$v[‘name‘]}‘,"; } $legend_data=substr($legend_data,0,-1); $this->assign(‘legend_data‘,$legend_data); //分类,与legend同数据 $json_cate=json_encode($category,JSON_NUMERIC_CHECK); $this->assign(‘json_cate‘,$json_cate); ####连接查询#### 查询第一层 $links_data=M(‘links‘)->field(‘source,target,value,id as id_‘)->order(‘id asc‘)->where(‘source=0‘)->select();// $id_str=‘0,‘; foreach($links_data as $v){ $id_str.="{$v[‘target‘]},"; } $id_str=substr($id_str,0,-1); $links_data2=M(‘links‘)->field(‘source,target,value,id as id_‘)->order(‘id asc‘)->where(" `source` in (%s) ",$id_str)->select(); foreach($links_data2 as $k=>$v){ $links_data[]=$v; } $json_links=json_encode($links_data); $this->assign(‘json_links‘,$json_links); ####数据查询#### $where=array(); $where[‘id‘]=array(‘in‘,$id_str); $nodes_data=M(‘nodes‘)->field(‘id as id,name,category‘)->order(‘id asc‘)->where($where)->select(); $json_nodes=json_encode($nodes_data,JSON_NUMERIC_CHECK); //echo $json_nodes; $this->assign(‘json_nodes‘,$json_nodes); $this->display(); } public function only_show(){ //only_show函数等下点击节点时候ajax用。 $selfid=I(‘post.id‘); ####连接查询#### $map=array(); $map[‘_query‘] = "source=$selfid&target=$selfid&_logic=or"; $links_data=M(‘links‘)->field(‘source,target,value‘)->order(‘id asc‘)->where($map)->select(); $id_str=‘ ‘; foreach($links_data as $v){ $id_str.="{$v[‘target‘]},"; $id_str.="{$v[‘source‘]},"; } $id_str=substr($id_str,0,-1); $links_data=M(‘links‘)->field(‘source,target,value,id as id_‘)->order(‘id asc‘)->where(" `source` in (%s) or `target` in (%s) ",$id_str,$id_str)->select(); $json_links=json_encode($links_data); $result[‘json_links‘]=$json_links; ####数据查询#### $where[‘id‘]=array(‘in‘,$id_str); $nodes_data=M(‘nodes‘)->field(‘id as id,name,category‘)->order(‘id asc‘)->where($where)->select(); $json_nodes=json_encode($nodes_data,JSON_NUMERIC_CHECK); $result[‘json_nodes‘]=$json_nodes; $this->ajaxReturn($result); }
视图代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>关系图试验</title> 5 <meta charset="utf-8"> 6 <script type="text/javascript" src="__PUBLIC__/js/echarts.js"></script> 7 <script type="text/javascript" src="__PUBLIC__/js/jquery.js"></script> 8 9 </head> 10 <body> 11 <div id="main" style="width: 1000px;height:600px;"></div> 12 <script type="text/javascript"> 13 var linksNodeArrs=[]; 14 var TimeFn=null; 15 $(function(){ 16 17 option = { 18 title: { 19 text: ‘测试关系图‘ 20 }, 21 tooltip: {}, 22 //animationDurationUpdate: 1500, 23 animationEasingUpdate: ‘quinticInOut‘, 24 label: { 25 normal: { 26 show: true, 27 textStyle: { 28 fontSize: 12 29 }, 30 } 31 }, 32 legend: { 33 x: "center", 34 show: true, 35 data: [{$legend_data}] 36 }, 37 series: [ 38 { 39 //name:‘系列名‘, 40 type: ‘graph‘, 41 layout: ‘force‘, 42 symbolSize: 45, 43 focusNodeAdjacency: true, //突出相关 44 roam: true, //鼠标缩放、平移 45 force: { //斥力因子 46 repulsion: 500, 47 edgeLength:[100,200], 48 }, 49 draggable:true, 50 tooltip:{ 51 trigger:‘item‘, 52 backgroundColor: ‘rgba(245, 244, 237,0.7)‘ ,//提示框浮动背景色 53 borderColor:‘black‘, 54 borderWidth:1, 55 textStyle:{ 56 color:‘black‘, 57 fontWeight:‘bold‘, 58 59 } 60 }, 61 62 categories: {$json_cate}, 63 label: { 64 normal: { 65 show: true, 66 textStyle: { 67 fontSize: 12 68 }, 69 } 70 }, 71 72 edgeSymbolSize: [0, 10], 73 edgeSymbol:‘arrow‘, 74 75 edgeLabel: { 76 normal: { 77 show: true, 78 textStyle: { 79 fontSize: 10 80 }, 81 formatter: "{b}" 82 } 83 }, 84 nodes: {$json_nodes}, 85 links: {$json_links}, 86 lineStyle: { 87 normal: { 88 opacity: 0.9, 89 width: 1, 90 curveness: 0, 91 shadowColor: ‘rgba(0, 0, 0, 0.8)‘, 92 shadowBlur: 5, 93 shadowOffsetX:3, 94 shadowOffsetY:3, 95 }, 96 emphasis:{ 97 width:3 //hover时改变线宽 98 } 99 }, 100 101 102 } 103 ] 104 }; 105 106 //console.log(option) 107 var myChart = echarts.init(document.getElementById(‘main‘)); 108 myChart.setOption(option); 109 110 //↑上面为加载完后初次显示 111 112 myChart.on(‘click‘, cevent); 113 myChart.on(‘dblclick‘, dbcevent); 114 115 function cevent(param) { 116 clearTimeout(TimeFn); 117 //执行延时 118 TimeFn = setTimeout(function(){ 119 var option = myChart.getOption(); 120 var data = param.data; 121 if (data != null && data != undefined) { 122 cid=data.id; 123 $.post("{:U(‘only_show‘)}",{id:cid},function(rs){ 124 var json_nodes = eval(‘(‘ + rs.json_nodes + ‘)‘); 125 var json_links = eval(‘(‘ + rs.json_links + ‘)‘); 126 127 for(var v in json_nodes){ 128 var exist=false;//是否存在 129 for(var i in option.series[0].nodes){ 130 131 if(json_nodes[v][‘id‘] == option.series[0].nodes[i][‘id‘] || json_nodes[v][‘name‘] == option.series[0].nodes[i][‘name‘]){ 132 exist=true; 133 break; 134 } 135 } 136 if(!exist){ 137 option.series[0].nodes.push(json_nodes[v]); 138 } 139 } 140 141 for(var v in json_links){ 142 var exist=false; //是否存在 143 for(var i in option.series[0].links){ 144 if(json_links[v][‘id_‘] == option.series[0].links[i][‘id_‘]){ 145 exist=true; 146 break; 147 } 148 } 149 if(!exist){ 150 option.series[0].links.push(json_links[v]); 151 } 152 } 153 154 option.series[0].nodes=quicksort(option.series[0].nodes) 155 156 //option.series[0].nodes=json_nodes; 157 //option.series[0].links=json_links; 158 myChart.setOption(option); 159 }) 160 } 161 },300); 162 } 163 164 165 166 function dbcevent(param) { 167 clearTimeout(TimeFn); 168 var option = myChart.getOption(); 169 var data = param.data; 170 if (data != null && data != undefined) { 171 cid=data.id; 172 $.post("{:U(‘only_show‘)}",{id:cid},function(rs){ 173 //console.log(rs); 174 var json_nodes = eval(‘(‘ + rs.json_nodes + ‘)‘); 175 var json_links = eval(‘(‘ + rs.json_links + ‘)‘); 176 option.series[0].nodes=json_nodes; 177 option.series[0].links=json_links; 178 myChart.setOption(option); 179 }) 180 } 181 } 182 183 //冒泡 184 function bubbleSort(array){ 185 var i = 0, 186 len = array.length, 187 j,d; 188 for(;i<len;i++){ 189 for(j=0;j<len;j++){ 190 if(array[i][‘id‘]<array[j][‘id‘]){ 191 d=array[j]; 192 array[j]=array[i]; 193 array[i]=d; 194 } 195 } 196 } 197 return array; 198 } 199 //快速 200 function quicksort(arr){ 201 if (arr.length == 0) 202 return []; 203 204 var left = new Array(); 205 var right = new Array(); 206 var pivot = arr[0]; 207 208 for (var i = 1; i < arr.length; i++) { 209 if (arr[i][‘id‘] < pivot[‘id‘]) { 210 left.push(arr[i]); 211 } else { 212 right.push(arr[i]); 213 } 214 } 215 216 return quicksort(left).concat(pivot, quicksort(right)); 217 } 218 219 }); 220 </script> 221 222 </body> 223 224 </html>
稍微说明一下:
- cevent()函dbcevent()函数单击双击效果加了延迟是因为,在我测试的时候,双击也会触发到两次单击然后才执行双击,重复执行。加延迟为了解决这个问题。
- 154行在设置重置前用了个排序去排nodes,是因为,在乱序模式中不排序会造成错误,links的source和target用不到nodes里面的id值,就会去用索引的值,放两个图看效果。
- p.s.本来测试的时候随便找了个冒泡排序排了序测试了下,最后写博客才想用个快排,放个冒泡确实比较不提倡。
最后放一个完结图:单击扩展一级节点,双击已节点扩展一级!
参考文献
2.快速排序(Quicksort)的Javascript实现,阮一峰
3.Friday Algorithms: Quicksort – Difference Between PHP and JavaScript