原创

可视化组件节点属性介绍

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

如何获取可视化节点?

//获取图可视化元素中所有的节点
var nodes = visGraph.nodes;

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

节点的属性说明

属性名称

属性说明

使用示例

id

节点唯一标识

node.id=100001

type

节点类型,如:事件、地点、人物等的定义

node.type='男'

label

节点标签,显示名称

node.label='节点A'

x

节点在画布中x坐标

node.x=500

y

节点在画布中y坐标

node.y=500

radius

节点的半径大小

node.radius=60

width

节点的长度(类型为rect时生效)

node.width=120

height

节点的高度(类型为rect时生效)

node.height=40

image

节点的图标

node.image='/image/head.png'

alpha

节点的透明度,取值0-1

node.alpha=0.9 

fillColor

节点的填充色(只支持色值)

node.fillColor='255,0,0'

textPosition

节点标签的位置请(请查看下方详细说明)

node.textPosition='Middle_Center'

font

节点标签的字体,大小及字体格式

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

borderWidth

节点边框的宽度

node.borderWidth=8

borderColor

节点边框的颜色

node.borderColor='50,255,50'

shape

节点的形状,圆形,矩形、五角形等(请查看下方详细说明)

node.shape='circle'

showlabel

是否显示节点标签

node.showlabel=true

textOffsetX

标签文字在X坐标系上偏移量

node.textOffsetX=10

textOffsetY

标签文字在Y坐标系上偏移量

node.textOffsetY=10

wrapText

节点包裹文字

 node.wrapText=false

showShadow

是否显示选中阴影

node.showShadow=true

shadowColor

选中阴影的颜色

node.shadowColor='50,10,250'

selectedBorderColor

选中节点时边框的颜色

node.selectedBorderColor='255,0,0'

selectedBorderAlpha

选中节点时边框的透明度

node.selectedBorderAlpha=0.8

selectedBorderWidth

选中节点时边框的宽度

node.selectedBorderWidth=10

lineDash

节点边框虚线样式,默认[0]为实线

node.lineDash=[5,8]

scaleX

横向放大系数

node.scaleX=1.2

scaleY

纵向放大系数

node.scaleY=1.2

tipText

节点提示文字

node.tipText='100'

selected

节点选中,点击和框选都会修改该属性

node.selected=false

showSelected

节点显示选中效果

node.showSelected=true

dragable

节点是否可拖动,默认true

node.dragable=true

visible

节点是否显示,默认true

node.visible=true

inLinks

节点的输入连线

var inlinks = node.inlinks;

可通过该属性获取节点的上游节点

outLinks

节点的输出连线

var outLinks = node.outLinks;

可通过该属性获取节点的指向的目标节点

properties


节点的扩展属性,业务扩展字段都可放这个里面


node.properties={name:'刘玄德',birthday:'公元218年',country:'蜀国'}


节点形状的定义

circle

圆形

指定半径大小的圆形

rect

矩形

可定义长、宽不一致的长方形

ellipse

椭圆形


triangle

三角形


star

五角形


polygon

六边形



节点标签位置的定义

如:node.textPosition='Middle_Center'

Middle_Center

上下左右居中

Top_Center

顶部居中

Bottom_Center

底部居中

Middle_Left

左边居中

Middle_Right

右边居中

Bottom_Left

底部居左

Bottom_Right

底部居右


效果图


正文到此结束