原创

GraphVis可视化绘图配置详解

温馨提示:
本文最后更新于 2021年12月05日,已超过 165 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我
let visGraph = new VisGraph(document.getElementById('#visual-panel'), {
	node: { //节点的默认配置
		label: { //标签配置
			show: true, //是否显示
			color: '50,50,50', //字体颜色
			font: 'bold 13px 微软雅黑', //字体大小及类型
			wrapText: false, //节点包裹文字
			textPosition: 'Middle_Center', //文字位置 Top_Center,Bottom_Center,Middle_Right
			//textOffsetX:-24,//文字横向偏移量
			//textOffsetY:-24,//文字纵向偏移量
			//backgroud:'255,255,255',//文字背景色
			//borderWidth:0,//文字边框宽度
			//borderColor:'250,250,250'//文字边框颜色
		},
		shape: 'circle', //节点形状 circle,rect,square,ellipse,triangle,star,polygon,text
		//image:'images/T1030001.svg',//节点图标(设置后节点显示为圆形图标)
		color: '20,20,200', //节点颜色
		borderColor: '255,255,255', //边框颜色
		borderWidth: 2, //边框宽度,
		borderRadius: 0, //边框圆角大小
		lineDash: [0], //边框虚线间隔,borderWidth>0时生效
		alpha: 1, //节点透明度
		size: 60, //节点默认大小
		width: 80, //节点的长度(shape为rect生效)
		height: 40, //节点的高度(shape为rect生效)
		selected: { //选中时的样式设置
			borderColor: '50,120,230', //选中时边框颜色
			borderAlpha: 1, //选中时的边框透明度
			borderWidth: 8, //选中是的边框宽度
			showShadow: false, //是否展示阴影
			shadowColor: '50,100,250' //选中是的阴影颜色
		},
		onClick: function(event, node) { //节点点击事件回调
			console.log('点击节点----[' + node.id + ':' + node.label + ']');
		},
		ondblClick: function(event, node) {
			console.log('双击节点');
		}, //节点双击事件
		onMouseDown: function(event, node) {
			console.log('鼠标按下节点');
		}, //节点的鼠标按下事件
		onMouseUp: function(event, node) {
			console.log('鼠标弹起节点');
		}, //节点的鼠标弹起事件
		onMouseOver: function(event, node) {
			console.log('鼠标移入节点');
		}, //节点的鼠标划过事件
		onMouseOut: function(event, node) {
			console.log('鼠标移出节点');
		}, //节点的鼠标划出事件
		onMousedrag: function(event, node) {
			console.log('拖动节点');
		} //节点的拖拽移动事件
	},
	link: { //连线的默认配置
		label: { //连线标签
			show: true, //是否显示
			color: '50,50,50', //字体颜色
			font: 'normal 12px 微软雅黑' //字体大小及类型
		},
		lineType: 'direct', //连线类型,direct,curver,vlink,hlink,bezier,vbezier,hbezier
		colorType: 'defined', //连线颜色类型 source:继承source颜色,target:继承target颜色 both:用双边颜色,defined:自定义
		color: '120,120,120', //连线颜色
		alpha: 0.8, // 连线透明度
		lineWidth: 2, //连线宽度
		lineDash: [0], //虚线间隔样式如:[5,8]
		showArrow: true, //显示箭头
		selected: { //选中时的样式设置
			color: '250,50,50', //选中时的颜色
			alpha: 1,
			showShadow: false, //是否展示阴影
			shadowColor: '250,40,30' //选中连线时的阴影颜色
		},
		onClick: function(event, link) { //连线点击事件回调
			console.log('click link---[' + link.source.id + '-->' + link.target.id + ']');
		},
		ondblClick: function(event, link) {} //连线的双击回调事件
	},
	highLightNeiber: false, //相邻节点高度标志
	wheelZoom: 0.8, //滚轮缩放开关,不使用时不设置[0,1]
	noElementClick: function(event) { //画布空白处的点击事件
		console.log('点击了空白区域');
	},
	rightMenu: {
		nodeMenu: NodeRightMenu, //节点右键菜单配置
		linkMenu: LinkRightMenu // 连线右键菜单配置
	},
	layout: { //开启内置力导向布局,不配置时不启动
		type: 'force',
		options: {
			friction: 0.9,
			linkDistance: 150,
			linkStrength: 0.05,
			charge: -150,
			gravity: 0.01,
			noverlap: false
		}
	}
});

详细配置如上,可选择性配置需要的参数,不需要的功能无需配置,组件会使用默认值。

右键菜单的说明:

右键菜单完全开发给使用方自定义,只需要提供展示(show)和隐藏(hide)两个方法即可。

具体对象结构如下,根据自己的元素去修改定义即可:

//节点右键菜单
	const NodeRightMenu = {
		init : function(_graphvis){ //初始化菜单项
			var self = this;
			if($("#nodeContextMenu").length == 0){
				$("#visual-panel").append(nodeRightMenuTempl.innerHTML);
				$("#visual-panel").on('click','#nodeContextMenu .menu-btn',function(){ //绑定菜单点击事件
				    var type = $(this).attr('attrType');
				    if(type == 'nodeDetail'){
				        showNodeInfo(_graphvis.currentNode);
				    }else if(type == 'nodeConfig'){
				    	openNodeConfig(_graphvis.currentNode);
				    }else{
				        _graphvis.rightMenuOprate(type);
				    }
				    self.hide();
				});
			}
		},
		show : function(e,_graphvis){
			this.init(_graphvis);
			$("#nodeContextMenu").css({top:e.pageY-30,left:e.pageX}).show(); //展示菜单
		},
		hide : function(){
			$("#nodeContextMenu").hide(); //隐藏菜单
		}
	};
	
	// 连线右键菜单
	const LinkRightMenu = {
		init : function(_graphvis){
			var self = this;
			
			if($("#linkContextMenu").length == 0){
				$("#visual-panel").append(linkRightMenuTempl.innerHTML);
				$("#visual-panel").on('click','#linkContextMenu .menu-btn',function(){
				    var type = $(this).attr('attrType');
				    if(type == 'lineConfig'){
					    openLinkConfig(_graphvis.currentLink);
				    }else{
					    _graphvis.rightMenuOprate(type);
				    }
				    self.hide();
				});
			}
		},
		show : function(e,_graphvis){
			this.init(_graphvis);
			$("#linkContextMenu").css({top:e.pageY-30,left:e.pageX}).show();
		},
		hide : function(){
			$("#linkContextMenu").hide();
		}
	};





正文到此结束