Echarts Force力导向图实现节点可折叠

最新推荐文章于 2023-08-23 11:44:21 发布

大雄不爱吃肉

最新推荐文章于 2023-08-23 11:44:21 发布

阅读量1.5k

点赞数

有时候展现力导向图的时候会希望添加一些点击事件，随着节点的点击事件一层一层展开更多的子节点。这样的可视化能带来层次清晰的使用效果。这次我写的脚本就是用来控制Force的节点折叠效果。

作者：Reese
时间：2015-09-09
备注：希望这个文档能对大家有帮助，有用你就悄悄copy走，再默默地给我点个赞~ (≧▽≦)/

点击打开链接

/**  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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

ps:对nodes的属性定义使用好label和name可以达到这样的效果

Part3 、示例Demo

<!-- 
Echart 

Force力导向图实现节点可折叠

作者：Reese
版本：V0.1
时间：2015-09-09              
 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
    <div id="main" style="width: 850px; height: 500px"></div>
    <div id="ss" ></div>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">

        require.config({
            paths : {
                echarts : 'http://echarts.baidu.com/build/dist'
            }
        });
        require([ "echarts", "echarts/chart/force"], function(ec) {
            var myChart = ec.init(document.getElementById('main'), 'macarons');
            var option = {
                tooltip : {
                    show : false
                },
                series : [ {
                    type : 'force',
                    name : "Force tree",
                    itemStyle : {
                        normal : {
                            label : {show : true},
                            nodeStyle : {
                                brushType : 'both',
                                borderColor : 'rgba(255,215,0,0.4)',
                                borderWidth : 1
                            }
                        }
                    },
                    categories : [ {name : '学校'}, {name : '校区'}, {name : '学院'}, {name : '班级'} ],
                     nodes :
                     [{id:0,category:0,name:'0',label:'xx大学',symbolSize:40,ignore:false,flag:true},
                     {id:1,category:1,name:'1',label:'校区1',symbolSize:30,ignore:true,flag:true},
                     {id:2,category:2,name:'2',label:'学院1',symbolSize:20,ignore:true,flag:true},
                     {id:3,category:2,name:'3',label:'学院2',symbolSize:20,ignore:true,flag:true},
                     {id:4,category:1,name:'4',label:'校区2',symbolSize:30,ignore:true,flag:true},
                     {id:5,category:2,name:'5',label:'学院1',symbolSize:20,ignore:true,flag:true},
                     {id:6,category:2,name:'6',label:'学院2',symbolSize:20,ignore:true,flag:true},
                     {id:7,category:2,name:'7',label:'学院3',symbolSize:20,ignore:true,flag:true},
                     {id:8,category:1,name:'8',label:'校区3',symbolSize:30,ignore:true,flag:true},
                     {id:9,category:2,name:'9',label:'学院1',symbolSize:20,ignore:true,flag:true},
                     {id:10,category:2,name:'10',label:'学院2',symbolSize:20,ignore:true,flag:true},
                     {id:11,category:2,name:'11',label:'学院3',symbolSize:20,ignore:true,flag:true},
                     {id:12,category:2,name:'12',label:'学院4',symbolSize:20,ignore:true,flag:true},
                     {id:13,category:3,name:'13',label:'一班',number:45,techear:'张三',symbolSize:10,ignore:true,flag:true},
                     {id:14,category:3,name:'14',label:'二班',number:52,techear:'李四',symbolSize:10,ignore:true,flag:true}
                     ],
                    links : [ {source : 1,target : 0}, {source : 4,target : 0}, {source : 8,target : 0},
                              {source : 2,target : 1}, {source : 3,target : 1}, {source : 5,target : 4}, 
                              {source : 6,target : 4}, {source : 7,target : 4}, {source : 9,target : 8}, 
                              {source : 10,target : 8}, {source : 11,target : 8}, {source : 12,target : 8},
                              {source : 13,target : 6}, {source : 14,target : 6} ]
                } ]
            };
            myChart.setOption(option);
            var ecConfig = require('echarts/config');
            function openOrFold(param) {
                var option = myChart.getOption();
                var nodesOption = option.series[0].nodes;
                var linksOption = option.series[0].links;
                var data = param.data;
                var linksNodes = [];

                var categoryLength = option.series[0].categories.length;

                if (data.category == (categoryLength - 1)) {
                    alert(data.label);
                }

                if (data != null && data != undefined) {
                    if (data.flag) {

                        for ( var m in linksOption) {

                            if (linksOption[m].target == data.id) {
                                linksNodes.push(linksOption[m].source);
                            }
                        }
                        if (linksNodes != null && linksNodes != undefined) {
                            for ( var p in linksNodes) {
                                nodesOption[linksNodes[p]].ignore = false;
                                nodesOption[linksNodes[p]].flag = true;
                            }
                        }
                        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);
                                    }
                                }
                            }
                        }
                        if (linksNodes != null && linksNodes != undefined) {
                            for ( var p in linksNodes) {
                                nodesOption[linksNodes[p]].ignore = true;
                                nodesOption[linksNodes[p]].flag = true;
                            }
                        }
                        nodesOption[data.id].flag = true;
                        myChart.setOption(option);
                    }
                }
            }
            myChart.on(ecConfig.EVENT.CLICK, openOrFold);
        });
    </script>

</body>
</html>

 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

PS:Demo是直接可以运行的╰(￣▽￣)╭

大雄不爱吃肉

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Echarts Force力导向图实现节点可折叠

有时候展现力导向图的时候会希望添加一些点击事件，随着节点的点击事件一层一层展开更多的子节点。这样的可视化能带来层次清晰的使用效果。这次我写的脚本就是用来控制Force的节点折叠效果。作者：Reese 时间：2015-09-09 备注：希望这个文档能对大家有帮助，有用你就悄悄copy走，再默默地给我点个赞~ (≧▽≦)/点击打开链接目录
复制链接

扫一扫