正经学徒,佛系记录,不搞事情
基于上文: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