基于AntV G6的图形可视化引擎的介绍与应用-京东云开发者社区

##### 摘要
官网往往是用户接触到产品的首要渠道，作为“门面担当”，官网设计要在第一时间让用户了解认识、激发兴趣，甚至形成印象、引导转化。
在物流供应链行业中，B端技术向产品多半内容庞大、结构复杂，难以用只言片语表达清楚。但官网却需要在有限的内容篇幅内，将最精华最能体现产品核心的内容呈现给用户。直白来说就是像讲述故事一样“易理解又耐听”。
本篇文章会以“数字孪生平台”为案例，探讨B端技术向产品官网的设计中，如何巧妙的将复杂的概念传达并留下品牌印象，做官网设计的“翻译官”。

##### 关键词：B端官网设计、图形可视化

### 1 AntV G6的介绍

#### 1.1 什么是G6

G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。

G6 是 antv 体系的一个图可视化品牌，主要关注关系图的绘制，antv 还有其他应用，比如关注图表的 G2、F2，关注地理数据渲染的 L7 等

G6 是一个开源的 JavaScript 图形库，可以支持 PC、移动端、小程序多个平台。

![](//img1.jcloudcs.com/developer.jdcloud.com/b6fd1e63-0a82-4241-aa23-196861f86b3820220921151536.png)

#### 1.2 G6功能分布

下图是官方 v4 的框架图，比较能看出 G6 基础的功能分布。

- 跨 PC、mobile 平台
- 核心功能：状态管理、事件及交互、动画、布局；
- 扩展能力：插件、自定义基础类型
- 底层的 GPU 加速计算、g-base 的渲染能力等；

![](//img1.jcloudcs.com/developer.jdcloud.com/f95bbca2-b61f-4280-8f3f-7ba0c32271fb20220921151605.png)

#### 1.2 G6 的特性

G6 作为一款专业的图可视化引擎，具有以下特性：

- 优秀的性能：支持大规模图数据的交互与探索；
- 丰富的元素：内置丰富的节点与边元素，自由配置，支持自定义；
- 可控的交互：内置 10+ 交互行为，支持自定义交互；
- 强大的布局：内置了 10+ 常用的图布局，支持自定义布局；
- 便捷的组件：优化内置组件功能及性能；
- 友好的体验：根据用户需求分层梳理文档，支持 TypeScript 类型推断。
- 除了默认好用、配置自由的内置功能，元素、交互、布局均具有高可扩展的自定义机制。

### 2 快速安装与上手

#### 2.1 安装 & 引用

在项目中引入 G6 有以下两种方式：NPM 引入；CDN 引入。

**1）在项目中使用 NPM 包引入**

Step 1: 使用命令行在项目目录下执行以下命令：npm install --save @antv/g6
Step 2: 在需要用的 G6 的 JS 文件中导入：import G6 from '@antv/g6'

**2）在 HTML 中使用 CDN 引入**

// version <= 3.2
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-{$version}/build/g6.js"></script>
// version >= 3.3
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/{$version}/dist/g6.min.js"></script>
// version >= 4.0
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>

⚠注意:
在 {$version} 中填写版本号，例如 3.7.1；
最新版可以在 NPM 查看最新版本及版本号；
详情参考 Github 分支：https://github.com/antvis/g6/tree/master。

#### 2.2 快速上手小demo

**Step 1 创建容器**
需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器，通常为 div 标签。G6 在绘制时会在该容器下追加 canvas 标签，然后将图绘制在其中。

**Step 2 数据准备**
引入 G6 的数据源为 JSON 格式的对象。该对象中需要有节点（nodes）和边（edges）字段，分别用数组表示：

**Step 3 创建关系图**
创建关系图（实例化）时，至少需要为图设置容器、宽和高。

**Step 4 配置数据源，渲染 **

具体代码如下

![](//img1.jcloudcs.com/developer.jdcloud.com/50a76f0f-5950-4129-8198-f1355493b8fc20220921151717.png)

![](//img1.jcloudcs.com/developer.jdcloud.com/134e1e2f-4c42-4fc6-bb21-c75e8c6fa3ae20220921151725.png)

![](//img1.jcloudcs.com/developer.jdcloud.com/bb8f7af5-5361-4f2a-8061-32da1c6c8fb420220921151731.png)

效果如下图：

![](//img1.jcloudcs.com/developer.jdcloud.com/e6e9cc67-2813-4288-914f-a698fd96e14220220921152903.png)

### 3 G6 配置介绍

#### 3.1Graph

在 G6 中，Graph 对象是图的载体，它包含了图上的所有元素（节点、边等），同时挂载了图的相关操作（如交互监听、元素操作、渲染等）。

##### 3.1.1 必要配置项

•container
•width、height

##### 3.1.2 常用配置项

使用 canvas 或svg渲染
•renderer

自适应画布
•fitView
•fitViewPadding
•fitCenter

全局元素配置
•defaultNode
•defaultEdge
•nodeStateStyles
•edgeStateStyles

布局相关
•layout

交互行为相关
•modes

动画相关
•animate
•animateCfg

插件
•plugins

常用方法
•graph.data(data)
•graph.render()

元素操作
•graph.addItem(type,model,stack)
•graph.updateItem(type,model,stack)

查找元素
•graph.getNodes()
•graph.find(type,fn)
•graph.findById(id)

元素状态
•graph.setItemState(item,state,value)
graph.clearItemState

行为模式
•graph.setMode(mode)

事件绑定/解绑
•graph.on(eventName,handler)
•graph.off(eventName,handler)
graph.off(eventName）

#### 3.2 图元素

##### 3.2.1 节点

内置节点

circle，rect，ellipse，diamond，triangle，star，image，modelRect，donut

自定义节点

G6.registerNode(
	typeName: string,
	nodeDefinition: object,
	extendedTypeName?: string
	)

![](//img1.jcloudcs.com/developer.jdcloud.com/521b9363-3484-4376-97e6-51507dab485920220921153012.png)

##### 3.2.2 边

内置边

polyline， arc， quadratic， cubic，line，cubic-vertical，cubic-horizontal，loop

自定义边

G6.registerEdge(
	typeName: string,
	edgeDefinition: object,
	extendedTypeName?: string
	)

![](//img1.jcloudcs.com/developer.jdcloud.com/b872f7fd-75e1-4ba2-978c-5ba403f5b72c20220921153029.png)

##### 3.2.3 combo

内置combo

circle，rect

自定义combo

G6.registerCombo(
	comboName: string,
	comboOptions: object,
	extendedComboName?: string
	)

![](//img1.jcloudcs.com/developer.jdcloud.com/d7b1d464-e03c-44bc-acb3-8d4d26f80e2a20220921153122.png)

#### 3.3 交互与事件

##### 3.3.1 基础事件

通过 graph.on 与 graph.off 进行绑定/解绑监听函数。

![](//img1.jcloudcs.com/developer.jdcloud.com/87523248-e67e-4788-b658-95ac7691a72e20220921153138.png)

#### 3.3.2 内置behavior

Behavior 是 G6 提供的定义图上交互事件的机制。它与交互模式 Mode 搭配使用

![](//img1.jcloudcs.com/developer.jdcloud.com/2e4b07fa-e8e1-46c8-a79b-a7a7d6ce980a20220921153250.png)

drag-canvas、scroll-canvas、zoom-canvas、 drag-node、click-select

##### 3.3.3 自定义behavior

G6.registerBehavior(behaviorName: string, behavior:BehaviorOption)
生命周期：

绑定事件 触发事件 持续事件 结束事件 移除事件
BehaviorOption方法：
BehaviorOption.onNodeClick(evt)
BehaviorOption.getDefaultCfg()
BehaviorOption.shouldBegin(evt)
BehaviorOption.shouldUpdate(evt)
BehaviorOption.shouldEnd(evt)

### 4 基于AntV G6的项目实战演示

#### 4.1 G6 核心概念总览

![](//img1.jcloudcs.com/developer.jdcloud.com/27969a07-9f64-4a38-bc32-e990385be4c020220921153330.png)

#### 4.2 可视化建模简易版demo演示

提供一个可视化建模的工具类平台，方便、简化算法人员或者懂算法不想过多开发的人使用，拖过拖拉拽的方式，在前台去建立模型流程，通过低代码可视化建模方式减轻重复性的工程化工作

以下分几个模块讲：1、G6的渲染；2、自定义边、自定义节点、自定义行为；3、更新函数；4、高级组件；5、简易版界面展示

###### 1.G6的渲染方法

![](//img1.jcloudcs.com/developer.jdcloud.com/8294d935-b347-4924-81d9-a7f36bfc27d520220921153357.png)

###### 2.自定义边

![](//img1.jcloudcs.com/developer.jdcloud.com/7f8f4b13-da73-4739-a67e-82ea6fd007df20220921153412.png)

###### 3.更新函数；

![](//img1.jcloudcs.com/developer.jdcloud.com/418581c4-2f80-4c7a-a362-0e89788197f820220921153427.png)

###### 4.高级组件

![](//img1.jcloudcs.com/developer.jdcloud.com/4314070d-ce45-4a08-a722-5df3f26ed96c20220921153447.png)

###### 5.简易版界面展示

![](//img1.jcloudcs.com/developer.jdcloud.com/46a97524-9d27-4b70-9e1a-33cbc72255f520220921153509.png)

------------

###### 自猿其说Tech-JDL京东物流技术与数据智能部
###### 作者：孙慧娟 许园园 程慧