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

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

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

目录

Part1 、效果图展示

一开始是酱紫的(～￣▽￣)～：

接下来是酱紫的：

最后折叠了这丫的(o゜▽゜)o☆：

---

Part2、 代码块

/**  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){
                //引用的连