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

版权声明:博主原创,未经允许不得转载。 https://blog.csdn.net/qq_31748587/article/details/84230416

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

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

不能扩展节点的图是没有灵魂的,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

猜你喜欢

转载自blog.csdn.net/qq_31748587/article/details/84230416