1 快速上手

1.1 在项目中使用 npm 包引入
Step 1: 使用命令行在项目目录下执行以下命令
npm install --save @antv/g6
Step 2: 在需要用的 G6 的 JS 文件中导入
import G6 from '@antv/g6';
1.2 在 HTML 中使用 CDN 引入
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-{$version}/build/g6.js"></script>
注意

2 快速试用

创建一个 G6 的关系图仅需要下面几个步骤:
  • 创建关系图的 HTML 容器;
  • 数据准备;
  • 创建关系图;
  • 配置数据源,渲染。
Step 1: 创建容器
<div id="mountNode"></div>
Step 2: 数据准备

引入 G6 的数据源为 JSON 格式的对象。该对象中需要有节点(nodes)和边(edges)字段,分别用数组表示:

const data = {
// 点集
nodes: [
{
id: 'node1', // String,该节点存在则必须,节点的唯一标识
x: 100, // Number,可选,节点位置的 x 值
y: 200, // Number,可选,节点位置的 y 值
},
{
id: 'node2', // String,该节点存在则必须,节点的唯一标识
x: 300, // Number,可选,节点位置的 x 值
y: 200, // Number,可选,节点位置的 y 值
},
],
// 边集
edges: [
{
source: 'node1', // String,必须,起始点 id
target: 'node2', // String,必须,目标点 id
},
],
};
注意
  • nodes 数组中包含节点对象,唯一的 id 是每个节点对象中必要的属性,x、 y 用于定位;
  • edges 数组中包含边对象,source 和 target 是每条边的必要属性,分别代表了该边的起始点 id 与 目标点 id
  • 点和边的其他属性参见链接:图元素配置文档
Step 3: 创建关系图

创建关系图(实例化)时,至少需要为图设置容器、宽和高。

const graph = new G6.Graph({
container: 'mountNode', // String | HTMLElement,必须,在 Step 1 中创建的容器 id 或容器本身
width: 800, // Number,必须,图的宽度
height: 500, // Number,必须,图的高度
});
Step 4: 配置数据源,渲染

创建关系图(实例化)时,至少需要为图设置容器、宽和高。

graph.data(data); // 读取 Step 2 中的数据源到图上
graph.render(); // 渲染图
最终的结果

3 配置

3.1 元素及其配置

图的元素特指图上的节点Node和边Edge,不论是节点还是边,它们的属性分为两种:

  • 样式属性 style:对应 Canvas 中的各种样式,在元素状态State 发生变化时,可以被改变;
  • 其他属性:例如图形( shape)、id(id )一类在元素状态State发生变化时不能被改变的属性。

    例如,G6 设定 hover 或 click 节点,造成节点状态的改变,只能自动改变节点的样式属性(如 fillstroke 等其他属性(如 shape 等)不能被改变。如果需要改变其他属性,要通过 graph.updateItem 手动配置。样式属性是一个名为 style 的对象, style 字段与其他属性并行。

以节点元素为例,其属性的数据结构如下:

{
id: 'node0', // 元素的 id
shape: 'circle', // 元素的图形
size: 40, // 元素的大小
label: 'node0' // 标签文字
labelCfg: { // 标签配置属性
positions: 'center',// 标签的属性,标签在元素中的位置
style: { // 包裹标签样式属性的字段 style 与标签其他属性在数据结构上并行
fontSize: 12 // 标签的样式属性,文字字体大小
}
}
// ..., // 其他属性
style: { // 包裹样式属性的字段 style 与其他属性在数据结构上并行
fill: '#000', // 样式属性,元素的填充色
stroke: '#888', // 样式属性,元素的描边色
// ... // 其他样式属性
}
}

边元素的属性数据结构与节点元素相似,只是其他属性中多了 source 和 target 字段,代表起始和终止节点的 id

全局配置

适用场景:所有节点统一的属性配置,所有边统一的属性配置。使用方式:使用图的两个配置项:

defaultNode:节点在默认状态下的样式属性(style)和其他属性;

defaultEdge:边在默认状态下的样式属性(style)和其他属性。

defaultNode: {
size: 30, // 节点大小
// ... // 节点的其他配置
// 节点样式配置
style: {
fill: 'steelblue', // 节点填充色
stroke: '#666', // 节点描边色
lineWidth: 1, // 节点描边粗细
},
// 节点上的标签文本配置
labelCfg: {
// 节点上的标签文本样式配置
style: {
fill: '#fff', // 节点标签文字颜色
},
},
},
// 边在默认状态下的样式配置(style)和其他配置
defaultEdge: {
// ... // 边的其他配置
// 边样式配置
style: {
opacity: 0.6, // 边透明度
stroke: 'grey', // 边描边颜色
},
// 边上的标签文本配置
labelCfg: {
autoRotate: true, // 边上的标签文本根据边的方向旋转
},
},
3.2 使用图布局 Layout

当数据中没有节点位置信息,或者数据中的位置信息不满足需求时,需要借助一些布局算法对图进行布局。G6 提供了 7 种一般图的布局和 4 种树图的布局:

一般图:
  • Random Layout:随机布局;
  • Force Layout:经典力导向布局:
  • Circular Layout:环形布局;
  • Radial Layout:辐射状布局;
  • MDS Layout:高维数据降维算法布局;
  • Fruchterman Layout:Fruchterman 布局,一种力导布局;
  • Dagre Layout:层次布局。
树图布局:
  • Dendrogram Layout:树状布局(叶子节点布局对齐到同一层);
  • CompactBox Layout:紧凑树布局;
  • Mindmap Layout:脑图布局;
  • Intended Layout:缩进布局。
const graph = new G6.Graph({
... // 其他配置项
layout: { // Object,可选,布局的方法及其配置项,默认为 random 布局。
type: 'force', // 指定为力导向布局
preventOverlap: true, // 防止节点重叠
// nodeSize: 30, // 节点大小,用于算法中防止节点重叠时的碰撞检测。由于已经在上一节的元素配置中
linkDistance: 100, // 指定边距离为100设置了每个节点的 size 属性,则不需要在此设置 nodeSize。
center: [500, 300]
}
});

更多属性(https://g6.antv.vision/zh/docs/api/graphLayout/guide)

3.3 图的交互 Behavior

G6 中的交互行为。G6 内置了一系列交互行为,用户可以直接使用。简单地理解,就是可以一键开启这些交互行为:

  • drag-canvas:拖拽画布;
  • zoom-canvas:缩放画布。

更多详见:交互行为 Behavior

const graph = new G6.Graph({
// ... // 其他配置项
modes: {
default: ['drag-canvas', 'zoom-canvas', 'drag-node'], // 允许拖拽画布、放缩画布、拖拽节点
},
});
  • activate-relations

    含义:当鼠标移到某节点时,突出显示该节点以及与其直接关联的节点和连线;

参数:

  • trigger: 'mouseenter'。可以是 mousenter,表示鼠标移入时触发;也可以是 click,鼠标点击时触发;
  • activeState: 'active'。活跃节点状态。当行为被触发,需要被突出显示的节点和边都会附带此状态,默认值为 active;可以与 graph 实例的 nodeStyle 和 edgeStyle 结合实现丰富的视觉效果。
  • inactiveState: 'inactive'。非活跃节点状态。不需要被突出显示的节点和边都会附带此状态。默认值为 * * * inactive。可以与 graph 实例的 nodeStyle 和 edgeStyle 结合实现丰富的视觉效果;
  • resetSelected:高亮相连节点时是否重置已经选中的节点,默认为 false,即选中的节点状态不会被 activate-relations 覆盖;
{
type: 'activate-relations',
activeState: 'actives',
inactiveState: 'inactives',
resetSelected: false
},
// 当前节点的多状态样式
nodeStateStyles: {
actives: {
opacity: 1,
lineWidth: 0
},
inactives: {
opacity: 0.2,
lineWidth: 0
}
},
edgeStateStyles: {
actives: {
opacity: 1
},
inactives: {
opacity: 0.2
}
}

https://g6.antv.vision/zh/docs/manual/middle/states/defaultBehavior)

3.4 监听和绑定事件
  • 全局事件

    只要在画布上范围内发生均会被触发,如 mousedown,mouseup,click,mouseenter,mouseleave 等。
graph.on('click', (ev) => {
const shape = ev.target;
const item = ev.item;
if (item) {
const type = item.getType();
}
});
  • canvas 事件

    只在 canvas 空白处被触发,如 canvas:mousedown,canvas:click 等,以canvas:eventName 为事件名称。
graph.on('canvas:click', (ev) => {
const shape = ev.target;
const item = ev.item;
if (item) {
const type = item.getType();
}
});
  • 节点/边/combo 上的事件

    例如 node:mousedown,edge:click, combo:click 等,以 type:eventName 为事件名称。
graph.on('node:click', (ev) => {
const node = ev.item; // 被点击的节点元素
const shape = ev.target; // 被点击的图形,可根据该信息作出不同响应,以达到局部响应效果
// ... do sth
}); graph.on('edge:click', (ev) => {
const edge = ev.item; // 被点击的边元素
const shape = ev.target; // 被点击的图形,可根据该信息作出不同响应,以达到局部响应效果
// ... do sth
}); graph.on('combo:click', (ev) => {
const combo = ev.item; // 被点击 combo 元素
const shape = ev.target; // 被点击的图形,可根据该信息作出不同响应,以达到局部响应效果
// ... do sth
});
  • 图形上的事件

    指定图形上的事件,如 circle-shape:mousedown,circle-shape:click 等,以 shapeName:eventName 为事件名称。可用于绑定节点/边/combo 中对局部图形做出响应的场景。效果类似上文 graph.on('node:click', fn) 中通过 target 信息作出不同响应。

关于图形的 name:

内置节点/边/combo 上每个图形的名称在开发过程中可以通过 graph.on('node:click', (ev) => console.log(ev.target.get('name'))) 得知;

自定义节点/边/combo 中通过 addShape 增加的图形,可添加与 attrs 平级的 name 字段指定任意(同元素中唯一)字符串作为 name。请注意同个元素(节点/边/combo)中不同图形尽量给予不同的 name 值。

下面例子为图中所有 name 为 circle-shape 的图形绑定了 click 事件监听:

graph.on('circle-shape:click', (ev) => {
const shape = ev.target; // 被点击的图形
// ... do sth
});
  • 时机事件

时机事件指渲染、视口变换、元素增删改、数据变换等时机。所有时机事件详见 G6 的时机事件列表。如:beforeadditemafteradditem  等:

  • 节点/边/Combo 状态改变时的事件:beforerefreshitem 与 afterrefreshitem
  • 布局时机:beforelayout 与 afterlayout

下面例子为 graph 绑定了渲染完成时机的监听。时机事件中,afterrender、afterlayout 一类事件必须在 graph.render() 或 graph.read() 之前绑定,方可监听到首次渲染、布局完成后的相关事件。

graph.on('afterrender', (ev) => {
// ... do sth
});
  • 自定义事件

G6 允许用户自定义任意事件,可在任意位置通过 graph.emit(customEventName: string, event: IG6GraphEvent) 触发一个事件,第一个参数为自定义事件名称。在触发前,通过 graph.on(customEventName: string, callback: Function) 进行监听。例如:

graph.on('some-custom-event-name', (ev) => {
// ... do sth
});
graph.emit('some-custom-event-name', {
// some params
})
ps:当数据多样化的时候,可以对不同的数据设置不同的节点或者边的样式
data.nodes.forEach((node) => {
node.style = {
fill: node.type === 'company'
? '#EE5555'
: node.type === 'director'
? '#0F8CFF'
: '#FFC510',
stroke: node.type === 'company'
? '#EE5555'
: node.type === 'director'
? '#0F8CFF'
: '#FFC510'
}
})
data.edges.forEach((edge) => {
edge.style = {
stroke: edge.typest === 0
? '#EE5555'
: edge.typest === 1
? '#0F8CFF'
: '#FFC510'
}
edge.label = edge.typest === 0
? '董事'
: edge.typest === 1
? '经理'
: edge.typest === 2
? '职员'
: null
edge.labelCfg = {
style: {
fill: edge.typest === 0
? '#EE5555'
: edge.typest === 1
? '#0F8CFF'
: '#FFC510'
}
}
})

AntvG6-graph图谱工具的更多相关文章

  1. graph处理工具

    仅作为记录笔记,完善中...................... 1       PyGSP https://pygsp.readthedocs.io/en/stable/index.html ht ...

  2. Nebula Graph 在网易游戏业务中的实践

    本文首发于 Nebula Graph Community 公众号 当游戏上知识图谱,网易游戏是如何应对大规模图数据的管理问题,Nebula Graph 又是如何帮助网易游戏落地游戏内复杂的图的业务呢? ...

  3. 分析函数调用关系图(call graph)的几种方法

    绘制函数调用关系图对理解大型程序大有帮助.我想大家都有过一边读源码(并在头脑中维护一个调用栈),一边在纸上画函数调用关系,然后整理成图的经历.如果运气好一点,借助调试器的单步跟踪功能和call sta ...

  4. linux下阅读源代码的工具

    说来真是惭愧呀.一直在用VIM 做开发.却不知道VI 里还有这么好使的工具.以前一直都是用: find -type f -print | xargs grep -i **** 在源代码里查找. 原来L ...

  5. linux下源代码分析和阅读工具比较

    Windows下的源码阅读工具Souce Insight凭借着其易用性和多种编程语言的支持,无疑是这个领域的“带头大哥”.Linux/UNIX环境下呢?似乎仍然是处于百花齐放,各有千秋的春秋战国时代, ...

  6. NetworkX系列教程(1)-创建graph

    小书匠Graph图论 研究中经常涉及到图论的相关知识,而且常常面对某些术语时,根本不知道在说什么.前不久接触了NetworkX这个graph处理工具,发现这个工具已经解决绝大部分的图论问题(也许只是我 ...

  7. OPPO 图数据库平台建设及业务落地

    本文首发于 OPPO 数智技术公众号,WeChat ID: OPPO_tech 1.什么是图数据库 图数据库(Graph database)是以图这种数据结构存储和查询的数据库.与其他数据库不同,关系 ...

  8. 【腾讯Bugly干货分享】跨平台 ListView 性能优化

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/FbiSLPxFdGqJ00WgpJ94yw 导语 精 ...

  9. VS2010 C++学习(5):基于DirectShow的视频预览录像程序

    VS2010 C++学习(5):基于DirectShow的视频 预览录像程序 学习VC++编制的基于DirectShow视频捕获程序,主要练习基于DirectShow程序的应用. 一.         ...

  10. Facebook 广告投放相关概念简介(1)

    本文不涉及具体代码实现,仅对开发API的前置内容做简单介绍,想参考代码请绕行! 广告主(广告管理工具) ·需要推广自己的应用.网站.主页,所以有了广告管理工具 . ·一个广告主仅可拥有一个广告账户(可 ...

随机推荐

  1. GYM-A. Golden Spirit等

    1.题目链接:Problem - A - Codeforces 题意:桥两边有2 * n个不能独立过桥的老人,老人想到对面休息 re 分钟后返回原位置,每次过桥需要花费 cr 分钟,问最少需要多长时间 ...

  2. dd命令创建文件

    dd if=... of=... bs=... count=... if表示输入文件,of表示输出文件,bs默认指定了以字节为单位的块大小(单位有字节c,字w,块B,千字节m,兆字节m,吉字节G),c ...

  3. 【LeetCode贪心#02】摆动序列,麻了

    摆动序列 力扣题目链接(opens new window) 如果连续数字之间的差严格地在正数和负数之间交替,则数字序列称为摆动序列.第一个差(如果存在的话)可能是正数或负数.少于两个元素的序列也是摆动 ...

  4. 【LeetCode二叉树#12】合并二叉树(巩固层序遍历)

    合并二叉树 力扣题目链接(opens new window) 给定两个二叉树,想象当你将它们中的一个覆盖到另一个上时,两个二叉树的一些节点便会重叠. 你需要将他们合并为一个新的二叉树.合并的规则是如果 ...

  5. 领略一下swift函数派发机制流程

    函数派发 Swift中函数的派发机制有三种:静态派发,函数表派发,消息派发. 静态派发 静态派发是指在运行时不需要查表,直接跳转到方法进行执行.静态派发的性能也是最高的.c语言采用的是直接派发. 函数 ...

  6. Fasfdfs搭建

    目录 介绍 参考 tracker-server: storage-server: group: meta data: 部署 FastDfs服务架构图 本地部署服务 安装 libfastcommon 和 ...

  7. 【Azure API 管理】讨论APIM是否适合直接存储文件到Azure Storage Account呢?

    问题描述 需要从 APIM 直接将大文件存入Azure Storage,没看到这方面的官方文档,所以是否有这方面的实践案例,或者APIM是否支持引用SDK (如Azure Storage SDK)? ...

  8. C++ auto与循环

    C++ auto与循环 C++ auto 的介绍 typeid(p).name();可以输出auto的类型 auto 是 C++11 引入的一个关键字,用于自动类型推导.编译器会根据初始化表达式的类型 ...

  9. IISExpress 跨域cookie的奇怪问题

    测试环境 WIN10,IIS 10,IISExpress 10,Chrome 120,Microsoft Edge 114 网站A 端口7001 只有1个Default.aspx,无前端代码.逻辑很简 ...

  10. ElasticSearch基本查询使用(2)

    在介绍本章之前,需要先打开安装的Kibana页面, 并打开命令行工具页面: 并且根据上节的介绍,我们需要根据中文搜索,所以需要在建立映射时,指定中文字段的分词器为Ik分词器, 默认为英文分词器,每个中 ...