当前位置：首页 > news >正文

前端开发基于Qunee绘制网络拓扑图总结-02

news 2025/8/22 15:00:10

1、渲染连线颜色

*关键函数一定要调用：graph.invalidate()*

graph.forEach(function(element) {if (element instanceof Q.Edge) {let arr = ['#549BF1', '#AA8A6E', '#8F54F1','#5A70BC','#BCBF5C', '#BC5A76', '#67B4D4','#B4C9EF', '#676AD4', '#A86EAA','#5CBF7F', '#EFB4B4'];let index = Math.floor(Math.random() * arr.length)element.setStyle(Q.Styles.EDGE_COLOR, arr[index]);	}	
}		
graph.invalidate(); // 改变元素的颜色

2、显示隐藏：节点、连线名称

关键代码：ele.get('data')获取原始数据

let isShowName = false
graph.forEach(ele => {if (ele instanceof Q.Node && !(ele instanceof Q.Group)) {let eleData = ele.get('data') // 创建节点时，备份原始数据 此时获取原始数据if(!isShowName){ele.name = ""}else{ele.name = eleData.name}}
})

3、显示隐藏连线

*关键函数一定要调用：graph.invalidateVisibility()*

let isHidelink = false // 定义全局变量·改变变量·控制显隐
// 1、具体显示隐藏某个特定条件的连线
graph.forEach(function(element) {if (element instanceof Q.Node) {let eleData = element.get('data')if(eleData&&eleData.name=='link666'){element.visible = isHidelink;}}
})
// 2、全局显示隐藏连线
graph.forEach(function(element) {if (element instanceof Q.Node) {element.visible = isHidelink;}
})
graph.invalidateVisibility(); // 元素显示隐藏

4、显示隐藏节点

*关键函数一定要调用：graph.invalidateVisibility()

let isHideNode = false // 定义全局变量·改变变量·控制显隐
// 1、具体显示隐藏某个特定条件的节点，此时与该节点相关的连线也会同时显示隐藏
graph.forEach(function(element) {if (element instanceof Q.Node) {let eleData = element.get('data') // // 创建节点时，备份原始数据 此时获取原始数据if(eleData&&eleData.name=='node666'){element.visible = isHideNode;}}
})
// 2、全局显示隐藏节点
graph.forEach(function(element) {if (element instanceof Q.Node) {element.visible = isHideNode;}
})
graph.invalidateVisibility(); // 元素显示隐藏