原创

GraphVis可视化组件连线介绍

温馨提示:
本文最后更新于 2021年12月05日,已超过 165 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我

GraphVis可视化组件连线支持多种类型,并能自定义颜色、宽度、箭头、文字等属性,开发专属的个性化的关系图应用。

获取组件内的可视化连线对象

//获取图可视化元素中所有的连线
var links = visGraph.links;

//比如给类型为【男】的节点,显示标签并且绑定双击事件
links.map(function(link){
   if(link.properties.type == '同事'){
        link.showlabel = true;
  	link.dbclick(function(event){
       		console.log('双击连线打开配置');
   	});
   }
});

连线的属性介绍

属性名称

属性说明

使用示例

id

连线的唯一标识

link.id=100001

label

连线标签,显示名称

link.label='同事'

alpha

连线的透明度,取值0-1

link.alpha=0.9 

strokeColor

连线的颜色

link.strokeColor='50,50,250'

font

连线的字体,大小及字体格式

link.font='14px 微软雅黑'

fontColor

连线文字的颜色

link.fontColor='10,10,10'

lineWidth

连线的宽度

link.lineWidth=4

weight

连线的权重,复杂分析场景使用

link.weight=40

lineType

连线的类型(详细请查看下方说明)

link.lineType='direct'

showlabel

是否显示连线文字

link.showlabel=true

showShadow

是否显示连线的选中阴影

link.showShadow=true

shadowColor

选中阴影的颜色

link.shadowColor='50,10,250'

selectedColor

选中连线的颜色

link.selectedColor='255,0,0'

selectedAlpha

选中连线的透明度

link.selectedAlpha=0.8

lineDash

连线的虚线样式,默认[0]为实线

link.lineDash=[5,8]

visible

连线是否显示,默认true

link.visible=true

source

连线的起始节点

var sourceNode= link.source;

获取连线的起始节点

target

连线的目标节点

var targetNode= link.target

获取连线的目标节点

properties

连线的扩展属性

link.properties={type:'朋友',startTime:'2018-10-01'}

连线的类型定义

如:link.lineType='direct'

direct

直线

curver

曲线

vdirect

直虚线

vcurver

曲虚线

vlink

垂直方向的折线

hlink

水平方向的折线

bezier

三次贝塞尔曲线

vbezier

垂直方向的贝塞尔曲线

hbezier

水平方向的贝塞尔曲线

效果图示

正文到此结束