Graph - 图

什么是 Graph

中文字“图”在大家的传统认知里指的是图画、图像，而图论与可视化中的“图”—— Graph 则有着更精确的定位：主体（objects）与关系（relationships）的组成。它甚至不局限于视觉，主体与关系的数据也可以称为图。

—— 摘自 AntV 专栏 文章：Graph Visualization · 知多少 之 《HelloWorld 图可视化》。

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

Graph 对象的完整生命周期包括：

1. 创建: 通过 new Graph(options) 实例化
2. 初始化: 在创建时进行内部初始化
3. 渲染: 调用 graph.render() 进行首次渲染
4. 更新: 通过各种 API 更新图的数据和配置
5. 销毁: 调用 graph.destroy() 销毁实例并释放资源

使用 G6 Graph

要使用 G6 创建 Graph，首先需要引入 @antv/g6 库，然后实例化 Graph 类。

安装教程参考：开始使用 - 安装

Graph 类接收一个实例化参数对象，称之为配置项(Options，在可视化理论中将其称为：Specification)，用于配置图的数据、元素样式、布局、交互等。

import { Graph } from '@antv/g6';

const graph = new Graph({
  container: 'container', // 通过 DOM ID 指定容器
  width: 800, // 画布宽高（若容器已设尺寸可省略）
  height: 600,
  data: {
    // 初始数据
    nodes: [{ id: 'start', data: { label: 'Hello G6!' } }],
  },
});

:::warning{title=注意} 实例化过程仅是配置图的基本信息，要将图渲染到页面上，还需要调用 render 方法 :::

图配置项

通过下表速查图的配置项，更多类型定义说明和详细用法请参考 API - 图配置项。

图属性

图实例提供了一些只读属性，用于获取图的状态信息：

参考示例

完整的创建和配置示例

import { Graph } from '@antv/g6';

const graph = new Graph({
  container: 'container',
  width: 300,
  height: 200,
  width: 300,
  height: 200,
  padding: 30,
  autoResize: true,

  // 视口配置
  zoom: 0.8,
  autoFit: 'view',
  padding: 20,

  // 主题配置
  theme: 'dark',

  // 节点配置
  node: {
    style: {
      fill: '#7FFFD4',
      stroke: '#5CACEE',
      lineWidth: 2,
    },
  },

  // 边配置
  edge: {
    style: {
      stroke: '#A4D3EE',
      lineWidth: 1.5,
      endArrow: true,
    },
  },

  // 布局配置
  layout: {
    type: 'force',
    preventOverlap: true,
    linkDistance: 100,
  },

  // 交互行为
  behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],

  // 初始数据
  data: {
    nodes: [
      { id: 'node1', data: { label: '节点1' } },
      { id: 'node2', data: { label: '节点2' } },
    ],
    edges: [{ source: 'node1', target: 'node2', data: { label: '关系' } }],
  },
});

graph.render();

import { Graph } from '@antv/g6';
import GUI from 'lil-gui';

export function addPanel(renderPanel: (gui: GUI) => void) {
  const gui = new GUI({ container: document.body });
  gui.title('Control');
  Object.assign(gui.domElement.style, { position: 'absolute', top: '0', right: '0', zIndex: '10' });
  renderPanel(gui);
  addEventListener('pagehide', () => gui.destroy(), { once: true });
}

export async function createGraph(
  options: ConstructorParameters<typeof Graph>[0],
  size: { width?: number; height?: number } = {},
  renderPanel?: (gui: GUI, graph: Graph) => void,
) {
  const container = document.createElement('div');
  Object.assign(container.style, {
    width: '100%',
    maxWidth: `${size.width || 600}px`,
    height: `${size.height || 400}px`,
  });
  document.getElementById('container')!.append(container);
  const graph = new Graph({ ...size, ...options, width: container.clientWidth, container, autoResize: true });
  addEventListener('pagehide', () => graph.destroy(), { once: true });
  await graph.render();
  if (renderPanel) addPanel((gui) => renderPanel(gui, graph));
  return container;
}

import { Graph } from '@antv/g6';

// 创建图实例
const graph = new Graph({
  // 基础配置
  container: 'container',
  width: 300,
  height: 200,
  padding: 30,
  autoResize: true,

  // 视口配置
  zoom: 0.8,
  autoFit: 'view',
  padding: 20,

  // 主题配置
  theme: 'dark',

  // 节点配置
  node: {
    style: {
      fill: '#7FFFD4',
      stroke: '#5CACEE',
      lineWidth: 2,
    },
  },

  // 边配置
  edge: {
    style: {
      stroke: '#A4D3EE',
      lineWidth: 1.5,
      endArrow: true,
    },
  },

  // 布局配置
  layout: {
    type: 'force',
    preventOverlap: true,
    linkDistance: 100,
  },

  // 交互行为
  behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],

  // 初始数据
  data: {
    nodes: [
      { id: 'node1', data: { label: '节点1' } },
      { id: 'node2', data: { label: '节点2' } },
    ],
    edges: [{ source: 'node1', target: 'node2', data: { label: '关系' } }],
  },
});

// 渲染图
graph.render();

• 要了解如何快速创建一个图，请参考快速上手。
• 要深入了解配置项中个部分的概念，请阅读本章节的其他内容。