6.4 KiB
| title | order |
|---|---|
| Graph 图 | 1 |
什么是 Graph
中文字“图”在大家的传统认知里指的是图画、图像，而图论与可视化中的“图”—— Graph 则有着更精确的定位：主体（objects）与关系（relationships）的组成。它甚至不局限于视觉，主体与关系的数据也可以称为图。
—— 摘自 AntV 专栏文章：Graph Visualization · 知多少 之 《HelloWorld 图可视化》。
在 G6 中，Graph 对象是图的载体，它包含了图上的所有元素（节点、边等），同时挂载了图的相关操作（如交互监听、元素操作、渲染等）。
Graph 对象的生命周期为：初始化 —> 加载数据 —> 渲染 —> 更新 —> 销毁。
在 快速上手 中，我们简单介绍了 初始化、加载数据、渲染图 的使用方法。本文将主要介绍初始化/实例化图。
前提代码
本文的讲解将会基于下面这份内嵌 JavaScript 的 HTML 代码。该代码通过定义数据、实例化图、读取数据、渲染图等操作中完成了下图中简单的图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Tutorial Demo</title>
</head>
<body>
/* 图的画布容器 */
<div id="mountNode"></div>
/* 引入 G6 */
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>
<script>
// 定义数据源
const data = {
// 点集
nodes: [
{
id: 'node1',
x: 100,
y: 200,
},
{
id: 'node2',
x: 300,
y: 200,
},
],
// 边集
edges: [
// 表示一条从 node1 节点连接到 node2 节点的边
{
source: 'node1',
target: 'node2',
},
],
};
// 创建 G6 图实例
const graph = new G6.Graph({
container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应
// 画布宽高
width: 800,
height: 500,
});
// 读取数据
graph.data(data);
// 渲染图
graph.render();
</script>
</body>
</html>
初始化/实例化图
通过 new G6.Graph(config) 进行图的实例化。其中参数 config 是 Object 类型的图的配置项，图的大部分功能可以通过该配置项进行全局配置。如 前提代码 这样实例化图：
const graph = new G6.Graph({
container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应
// 画布宽高
width: 800,
height: 500,
});
必要配置项
上面代码中实例化 Graph 的部分使用了三个必要的配置项：
container
类型：String | Object。图的 DOM 容器。可以是 String，为 DOM 容器的 id。也可以是 Object ，为 DOM 对象。
width、height
类型：Number。图的画布的宽度和高度。
常用配置项
下面列举实例化图时常见的配置项，完整的配置项参见 Graph API。
使用 canvas 或 svg 渲染
renderer
类型：String；默认：'canvas'，可选项：'canvas' / 'svg' 。配置使用 canvas 或 svg 渲染，除 V3.3.x 外其他版本均支持。 G6 默认使用 Canvas 渲染图， SVG 渲染也支持 Canvas 的所有功能。需要注意的是，我们都知道 SVG 的性能较差，在大规模数据或图元的情况下请谨慎选择。SVG 除支持内置的所有节点/边类型以及自定义节点/边时使用与 Canvas 相同的图形外，还支持在自定义节点/边时使用 'dom' 图形，详见 使用 DOM 自定义节点。
自适应画布
fitView
类型：Boolean；默认：'false'。图是否自适应画布。
fitViewPadding
类型：Number | Array；默认：0。图自适应画布时的四周留白像素值。fitView 为 true 时生效。
fitCenter
类型：Boolean；默认：'false'。是否平移图使其中心对齐到画布中心。v3.5.1 后支持。
全局元素配置
defaultNode
类型：Object。默认情况下全局节点的配置项，包括样式属性和其他属性。详见 内置节点 教程。
defaultEdge
类型：Object。默认情况下全局边的配置项，包括样式属性和其他属性。详见 内置边 教程。
nodeStateStyles
类型：Object。除默认状态外的其他状态下节点的样式配置。详见 状态 State 教程。
edgeStateStyles
类型：Object。除默认状态外的其他状态下边的样式配置。详见 状态 State 教程。
布局相关
layout
类型：Object。若数据中不存在节点位置，则默认为随机布局。配置布局类型及其参数。详见 使用布局 Layout 教程，图布局 API 或 树图布局 API。
交互行为相关
modes
类型：Array。配置多种交互模式及其包含的交互事件的。详见 交互模式 Mode。
动画相关
animate
类型：Boolean；默认：'false'。是否启用全局动画。启用后，布局变化时将会以动画形式变换节点位置。
animateCfg
类型：Object。全局动画的配置项，包括动画效果、动画时长等。详见 动画 Animation。
插件
plugins
类型：Array。配置辅助插件。详见 插件与工具。
常用函数
在前面的代码中使用了两个必要的函数：
// 读取数据
graph.data(data);
// 渲染图
graph.render();
data(data)：读取数据源data到图实例graph中。- render()：渲染图。
Graph 的完整函数参见 Graph API。