原创

GraphVis组件提供接口及使用说明

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

GraphVis可视化组件提供了常用操作接口,方便使用方直接调用进行数据的操作,如:选中、全选、反选、删除、框选、查找、设置等。

常用属性介绍

属性名称

属性说明

备注

nodes

所有节点

获取所有节点后可根据业务需要自由修改属性、样式、实现个性化需求

links

所有连线

获取所有连线后可根据业务需要自由修改连线属性、样式

currentNode

当前选中节点

获取当前节点后,可使用具体接口操作进行业务交互

currentLink

当前选中连线

获取连线后,可修改连线、删除等等操作

常用接口介绍

方法名称

方法说明

参数说明

drawData(data)

批量绘制关系图

data:图数据

格式:

{

   nodes:[{id:'A'},{id:'B'}],

   links:[{source:'A',target:'B'}]

}

addNode(node)

添加节点

node:节点信息

格式:{

    id:'10000',

    label:'节点名称',

    x:300,

    y:200,

   type:'节点类型',

   properties:{age:18,...}

}

addEdge(link)

添加连线

link:连线信息

{

   source:100001,

   target:100002,

   label:'连线文字'

}

getGraphData()

获取可视化数据中的所有节点和连线对象

返回对象如下:

{

   nodes:[],

   links:[]

}

getVisibleData()

获取显示状态的节点和连线对象

返回对象如下:

{

   nodes:[],

   links:[]

}

translateToCenter()

图元素平移到画布中心位置

setZoom(type)

设置缩放状态

type:缩放类型

参数取值说明:

zoomOut:放大

zoomIn:缩小

zoom1:恢复原始大小

moveCenter()

恢复原始大小移动到画布中心

highLightNeiberNodes(node,alpha)

相邻节点高亮显示,其他节点设置为指定透明度

node:指定可视化节点对象

alpha:透明度(取值 0-1)

restoreHightLight()

取消高度状态

lockNode(node)

锁定指定节点,不可移动或拖动

node:指定可视化节点对象

unLockNode(node)

节点取消锁定状态

node:指定可视化节点对象

showNodeLabel(flag)

显示或隐藏节点标签

flag:是否显示节点标签

true:显示

false:不显示

showLinkLabel

显示或隐藏连线标签

flag:是否显示节点标签

true:显示

false:不显示

setMouseModel(mode)

设置鼠标模式

mode:鼠标模式类型

说明:

drag:拖动模式

select:框选模式

normal:正常模式

contract(node)

收起指定节点的孤立叶子节点

node:指定节点

expanded(node)

展开指定节点的叶子节点

node:指定节点

setNodeShape(shapeType)

统一设置节点的形态

shapeType:形状类型

saveImage(width,height)

保存图片

width:图片的宽度(2000)

height:图片的高度(2000)

showOverView(flag)

显示或隐藏缩略图

flag:是否显示

true:显示

false:不显示

findNode(label)

按名称查找节点

label:节点名称

返回查找到的节点对象

hideAllLink()

隐藏所有连线

showAllLink()

显示所有连线

showAllNode()

显示所有节点

setTextPosition(textAlign)

设置节点标签位置

textAlign:标签位置类型

setLinkAlpha(alpha)

设置连线透明度

alpha:透明度

取值:0-1

setLinkArrowShow(flag)

设置连线箭头是否显示

flag:是否显示

true:显示

false:不显示

setLinkColorType(type)

设置连线颜色类型

type:连线颜色类型

说明:

source:继承起始节点颜色

target:继承目标节点颜色

both:继承两边节点颜色

defined:自定义颜色值


applyNodeSize(range)

按度大小映射节点大小

range:节点的大小范围

如:[10,100]

applyLinkWeight(range)

安权重大小映射连线宽度

range:连线的宽度范围

如:[1,20]

selectAll()

全选

reverseSelect()

反选

selectRelate(node)

选中关联节点

node:指定节点对象

showSelected()

仅显示选中

hideSelected()

隐藏已选中节点

hideIsolatedNodes()

隐藏所有孤立节点

deleteNode(node)

删除指定节点

node:指定的节点对象

deleteLink(link)

删除指定连线

link:指定待删除的连线对象

rotateGraph(angle)

旋转图数据

angle:旋转角度

取值:[0-360]

nodeWrapText(flag)

节点包裹文字

flag:是否显示

true:显示

false:不显示

findShortPath(sourceLabel,targetNodeLabel)

查找两点间的最短路径

显示最短路径经过的节点

pathAnalyze(sourceLabel,targetNodeLabel))

查找两点间所有路径

显示所有路径经过的节点

nLayerRelates(nodeLabel,nlayer)

查找节点的n层关系

显示n层关系的节点

setNodeSize(nodeSize)

统一设置节点大小

nodeSize:节点大小

如:60

setNodeColor(color)

统一设置节点颜色

color:节点颜色

如:255,10,10

getMousePosition(event)

获取鼠标事件在画布中的事件位置

event:鼠标位置

返回鼠标在画布中的位置信息

addNodeForDrag(node,callback)

拖拽添加节点到画布中

node:节点信息

callback:添加成功的回调函数

showAll()

显示所有连线和节点

delSelect()

删除选中节点

clearAll()

清空所有元素

activeAddNodeLinks(nodes,links)

在图中动态追加节点和连线

nodes:节点信息

links:连线数据


findNodeById(nodeId)

根据节点ID获取节点对象

nodeId:节点ID

updateNodeLabel(nodeId,nodeLabel)

更新节点名称

nodeId:节点ID

nodeLabel:节点名称

begainAddLine(node)

开始添加连线

node:指定的起始节点,

一般为当前选中节点


自定义绘图工具地址

自定义绘制网络关系图工具网址

正文到此结束