vis.js力导向图第三弹——双击扩展节点

正经学徒，佛系记录，不搞事情

基于上文：https://blog.csdn.net/qq_31748587/article/details/84143153 的项目

不能扩展节点的图是没有灵魂的，vis扩展节点比较简单，只需要追加节点和关系即可

首先定义一个变量数组nodeExtendArr，表示已扩展的节点

监听双击事件

network.on("doubleClick", function(params) {//双击事件
    if (params.nodes.length != 0) {
        //获取需要的参数，获取参数后可到后台获取扩展后的数据
        var id = network.body.data.nodes._data[params.nodes[0]].id;
        if(nodeExtendArr.indexOf(id) != -1){
            layer.msg("该节点已经扩展");
        }else{
            //每个节点只能扩展一次,nodeExtendArr记录已扩展的节点
            nodeExtendArr.push(id);
            //模拟后台获取扩展后的节点
	    param = {
	        nodes:[{
		    id: 'extendNode1'+id,
		    label: '老吴',
		    image:'image/man.png'
	        },{
		    id: 'extendNode2'+id,
		    label: '老吴',
		    image:'image/man.png'
	        }],
	        edges:[{
	            id: 'extendEdge1'+id,
	            fromNodeId: id,
	            toNodeId: 'extendNode1'+id,
    	            label:'新扩展节点'
	        },{
		    id: 'extendEdge2'+id,
		    fromNodeId: id,
		    toNodeId: 'extendNode2'+id,
		    label:'新扩展节点'
	        }]
	    }
            createNetwork(param);
        }
    }
});

最终效果：

项目地址：

https://pan.baidu.com/s/1_BhLZBus08Jn8Eb87IqLIg 提取码: ye63