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

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(); // 元素显示隐藏

5、寄语

人是自然的孩子
亲近自然是人的天性
青山绿水中藏着返璞归真的灵气
当你走出去
每一步都会是欢喜
繁忙的生活中
愿我们一张一弛
不疾不徐
慢慢来