GraphVis图可视化分析组件库 GraphVis图可视化分析组件库
  • 基础介绍
  • 基础功能
  • 交互功能
  • 全局统一配置
  • 标准数据格式定义
  • 组件接口导航
  • 应用开发介绍

    • 快速上手
    • 应用开发步骤
    • VUE框架中应用
    • 业务应用基础流程
  • 事件注册

    • 节点事件
    • 连线事件
    • 场景事件
  • 右键菜单

    • 右键菜单的定义
  • 图布局算法应用

    • 布局算法类型
    • 布局参数说明
    • 布局参数默认配置
  • 图分析算法应用

    • 图的路径分析
    • 节点中心性分析
    • 聚类分析
  • 关系扩线

    • 关系扩线
  • 节点模板配置

    • 自定义节点模板
    • 使用字体图标
  • 关系图类型

    • 层级关系图
    • 流程图
    • 弧线关系图
    • Sankey桑基图
  • 树图类型

    • 径向辐射树图
    • 紧凑树图
    • 缩进树图
    • 打包树图
    • 组织结构图
    • 类思维脑图
应用案例
商用授权
在线示例 (opens new window)
  • 基础介绍
  • 基础功能
  • 交互功能
  • 全局统一配置
  • 标准数据格式定义
  • 组件接口导航
  • 应用开发介绍

    • 快速上手
    • 应用开发步骤
    • VUE框架中应用
    • 业务应用基础流程
  • 事件注册

    • 节点事件
    • 连线事件
    • 场景事件
  • 右键菜单

    • 右键菜单的定义
  • 图布局算法应用

    • 布局算法类型
    • 布局参数说明
    • 布局参数默认配置
  • 图分析算法应用

    • 图的路径分析
    • 节点中心性分析
    • 聚类分析
  • 关系扩线

    • 关系扩线
  • 节点模板配置

    • 自定义节点模板
    • 使用字体图标
  • 关系图类型

    • 层级关系图
    • 流程图
    • 弧线关系图
    • Sankey桑基图
  • 树图类型

    • 径向辐射树图
    • 紧凑树图
    • 缩进树图
    • 打包树图
    • 组织结构图
    • 类思维脑图
应用案例
商用授权
在线示例 (opens new window)
  • 基础使用介绍

    • 基础介绍
    • 基础功能
      • 1、初始化客户端对象
        • 参数说明
      • 2、添加图数据
        • 参数说明
      • 3、清空画布图数据
      • 4、动态追加图数据(关系扩展)
      • 5、获取可视化图数据
      • 6、获取显示状态的图数据
      • 7、添加节点
        • 参数说明
      • 8、添加连线
        • 参数说明
      • 9、删除节点
        • 参数说明
      • 10、删除连线
        • 参数说明
      • 11、获取所有节点
      • 12、获取所有关系连线
    • 交互功能
    • 全局统一配置
    • 标准数据格式
  • 接口分类导航

    • 接口导航
    • 数据添加或查询类接口
    • 删除数据类操作接口
    • 快捷操作类接口
    • 功能类接口
    • 功能配置类接口
    • 图分析类接口
    • 图布局计算接口
    • 工具类接口
  • 应用开发介绍

    • 快速上手
    • 应用开发步骤
    • VUE框架中应用
    • 业务应用基础流程
  • 开发文档
  • 基础使用介绍
dubaopeng
2023-02-04
目录
1、初始化客户端对象
参数说明
2、添加图数据
参数说明
3、清空画布图数据
4、动态追加图数据(关系扩展)
5、获取可视化图数据
6、获取显示状态的图数据
7、添加节点
参数说明
8、添加连线
参数说明
9、删除节点
参数说明
10、删除连线
参数说明
11、获取所有节点
12、获取所有关系连线

基础功能

# 基础应用接口

提示

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

# 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()
1

# 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:[]} //返回图数据格式
1

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

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

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

# 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
基础介绍
交互功能

← 基础介绍 交互功能→

Theme by Vdoing | Copyright © 2020-2025 www.graphvis.cn. All rights reserved.
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式