开发文档
基础使用介绍

基础功能

# 基础应用接口

提示

基础应用接口主要介绍组件的实例化，图数据的添加、删除、查询、节点和连线的获取、删除等相关的操作处理接口。

# 1、初始化客户端对象

let graphVis = new GraphVis({
    container:document.getElementById('divId'), //画布层
    licenseKey:'licensekey', //授权license
    config:{} //可视化统一配置
});

1
2
3
4
5

# 参数说明

参数	类型	是否必须	说明
options	Object	是	初始化配置项 {container:'画布所在dom层',licenseKey:'授权license',config:'全局可视化配置'}

# 2、添加图数据

addGraph(graphData) 用于批量添加节点和连线数据。

var grapgData = {
    nodes:[{id:1000,label:'节点一'},{id:2000,label:'节点二'}],
    links:[{id:'e1',source:1000,target:2000,label:'关系'}]
};
graphVis.addGraph(graphData); //添加图数据

1
2
3
4
5

# 参数说明

参数	类型	是否必须	说明
graphData	Object	是	标准格式图数据，数据Schema定义具体可查看开发说明部分定义

# 3、清空画布图数据

clearAll() 清空画布所有的数据，进行重新添加。

graphVis.clearAll()

# 4、动态追加图数据（关系扩展）

activeAddData(centerNode, incrementData, layoutType, config) 在图中动态追加数据，一般用于节点关系扩展功能。

参数	类型	是否必须	说明
centerNode	Node	是	扩展关系的节点对象
incrementData	Object	是	新增扩展图数据（标准数据格式，需要包含扩展关系的节点）
layoutType	String	否	布局类型，支持网络布局：fastForce、环形布局：circle 同心圆布局：concentric
config	Object	否	布局配置，配置（默认节点大小,最小半径）如：{nodeRadius: 30,minCircleRadius: 150}

# 5、获取可视化图数据

getGraphData() 获取图中的可视化图数据，返回节点和连线的数组。

{nodes:[],links:[]} //返回图数据格式

# 6、获取显示状态的图数据

getVisibleData() 仅获取图中的处于显示状态的可视化图数据，返回节点和连线的数组。

{nodes:[],links:[]} //返回图数据格式

# 7、添加节点

addNodes(nodes) 添加节点数据，节点属性需要符合标准数据定义，具体可以查看开发说明部分节点属性定义。

# 参数说明

参数	类型	是否必须	说明
nodes	Array	是	添加一个或者多个节点数据，返回添加成功的可视化节点对象。节点属性可查看开发说明-基础应用部分详细说明。

var nodes = [
    {id:'1000',label:'节点A',type:'dot'},
    {id:'2000',label:'节点B',type:'dot'},
    {id:'3000',label:'节点C',type:'dot'}
];
nodes = graphVis.addEdges(nodes);

1
2
3
4
5
6

# 8、添加连线

addEdges(edges) 添加连线数据，连线属性需要符合标准数据定义，具体可以查看开发说明部分连线属性定义。返回添加成功的可视化连线对象数组。

# 参数说明

参数	类型	是否必须	说明
edges	Array	是	添加一条或者多条连线数据，连线属性可查看开发说明-基础应用部分详细说明。

var links = [
    {id:'e1',source:1000,target:2000},
    {id:'e2',source:1000,target:3000}
];
var edges = graphVis.addEdges(links);

1
2
3
4
5

# 9、删除节点

deleteNodes(nodes) 删除指定的节点对象。

# 参数说明

参数	类型	是否必须	说明
nodes	Array	是	删除一个或者多个节点

# 10、删除连线

deleteLinks(links) 删除指定的连线对象。

# 参数说明

参数	类型	是否必须	说明
links	Array	是	删除一条或者多条连线

# 11、获取所有节点

getNodes() 获取所有可视化节点数据。

返回节点数据的数组，可以用于遍历处理业务逻辑。如下示例：

graphVis.getNodes().forEach(node =>{
    if(node.type == 'people'){
        node.fillColor = '230,50.50';
    }
});

1
2
3
4
5

# 12、获取所有关系连线

getEdges() 获取所有可视化关系连线数据。

返回关系连线数据的数组，可以用于遍历处理业务逻辑。如下示例：

graphVis.getEdges().forEach(link =>{
    if(link.properties.times > 10){
        link.strokeColor = '250,120,120';
        link.lineWidth = 3;
    }
});

1
2
3
4
5
6

← 基础介绍交互功能→