vis.js力导向图第四弹——双击扩展节点（去重版）

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

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

可扩展的图最终都要面临的一个问题就是扩展后节点的重复

举个栗子：

首先将节点形状设置为“点dot”模式，构造如图的形状

以A节点为例子，假设A节点扩展后还有E和F两个节点

理想的效果是：

而现实是：

或者

因为B和D也属于A的关联节点，所以当扩展A节点的时候，已展示的节点仍然会再次读取，导致图的节点和边出现多次关联

这里提供的一个解决方法是通过在添加节点和边的时候为数据去重。

首先添加一个操作数组的方法：

//根据对象组数中的某个属性值进行过滤删除
//arrName数组名  field过滤的字段   keyValue字段值
function deleteValueFromArr(arrName,field,keyValue){
    if(arrName==null || arrName.length==0){
        return null;
    }
    for (var i =0;i< arrName.length;i++){
        if(arrName[i][field]==keyValue){
            arrName.splice(i,1);
        }
    }
    return arrName;
}

重写createNetwork方法：

//扩展节点 param nodes和relation集合
function createNetwork(param) {
    //可以试试注释掉去重的方法看看效果
    if(param.nodes && param.nodes.length>0){
        //去除已存在的节点  以“label”属性为例删除重复节点，根据具体的属性自行修改
        for(var i in network.body.data.nodes._data){
            var nodeTemp = network.body.data.nodes._data[i];
            param.nodes = deleteValueFromArr(param.nodes,"label",nodeTemp.label);
        }
    }
    //添加节点
    for(var i=0;i<param.nodes.length;i++){
        var node = param.nodes[i];
        //除了固定的参数外，可以自己增加额外的参数
        nodes.add({
            id: node.id,
            label: node.label
        });
    }
    if(param.edges && param.edges.length>0){
        //去除已存在的关系  以“label”属性为例删除重复节点，根据具体的属性自行修改
        for(var i in network.body.data.edges._data){
            var edgeTemp = network.body.data.edges._data[i];
            param.edges = deleteValueFromArr(param.edges,"label",edgeTemp.label);
        }
    }
    //添加关系
    for(var i=0;i<param.edges.length;i++){
        var edge = param.edges[i];
        edges.add({
            id: edge.id,
            arrows:'to',
            from: edge.fromNodeId,
            to: edge.toNodeId,
            label:edge.label,
            font:{align:"middle"},
            length:150
        });
    }
}

项目地址：

https://pan.baidu.com/s/1j063tvjEDjmXBdClTsgx_Q 提取码: x5rd