需要做一个树形图，可以查看各个人员的关系。

可伸缩的力引导图-失败

刚开始，打算做一个可展开和伸缩的，搜索时候发现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');functionopenOrFold(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 inlinksOption){//引用的连接关系的目标，既父节点是当前节点

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 inlinksNodes){

nodesOption[linksNodes[p]].ignore= false;//设置展示该节点

nodesOption[linksNodes[p]].flag = true;

}

}//设置该节点的flag为false，下次点击折叠子孙节点

nodesOption[data.id].flag = false;//重绘

myChart.setOption(option);

}else{/**

遍历连接关系数组

最终获得所选择节点的所有子孙子节点*/

for(var m inlinksOption){//引用的连接关系的目标，既父节点是当前节点

if(linksOption[m].target==data.id){

linksNodes.push(linksOption[m].source);//找到当前节点的第一层子节点

}if(linksNodes != null && linksNodes !=undefined){for(var n inlinksNodes){//第一层子节点作为父节点，找到所有子孙节点

if(linksOption[m].target==linksNodes[n]){

linksNodes.push(linksOption[m].source);

}

}

}

}//for(var m in linksOption){...}

/**

遍历最终生成的连接关系数组*/

if(linksNodes != null && linksNodes !=undefined){for(var p inlinksNodes){

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 inlinksNodes) {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 inlinksNodes_in) {

nodesOption[linksNodes_in[p]].category= nodesOption[linksNodes_in[p]].category*-1;

}

}else{ //闭合不需要做处理

}//递归取所有 id

function get_id(arr,cId,f=1){for ( var m inarr) {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);

}

}returnlinksNodeArrs;

}

图一为简单的扩展折叠，完美

图二为有问题的折叠，点击[设计师B]时，[项目1]和[厂商D]应该存在，因为还有别的路径，逻辑错误，这里要弄折叠肯定得通过有向图比较好解决。不过这里暂时用不到，以后有机会填此坑。

那么，不考虑折叠了，考虑单击出相关一级子节点，双击只显示此节点的第一级。

可扩展，以及单独显示的力引导图

为了以后需要查数据库动态获取数据，所以暂时把关系都存到数据库里。主要有两组数据，一组是每个节点(数据)，一组是他们的关系即连接线 。有人可能会想，这想一种数据结构，对，这就是有向图 ：

扯回来，代码只是演示相关功能并不完善，这里将不详细介绍各代码，只是简单的取数据库而已，Echarts基础请看官方文档和技术文章。

数据库简单设计三个，categories各分类，nodes数据节点，links边(可以看到保存了关系)

TP代码：

#查询最基本的显示

public functionindex(){####分类查询####

$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,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 functiononly_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

2

3

4

关系图试验

5

6

7

8

9

10

11