正經學徒，佛系記錄，不搞事情

基於上文：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