快速开始 ​

G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等基础的图可视化能力

安装使用 ​

npm i --save @antv/g6

import G6 from "@antv/g6";
const data = {
  nodes: [
    { id: "a", x: 100, y: 100 },
    { id: "b", x: 200, y: 100 },
  ],
  edges: [{ source: "a", target: "b" }],
};
const container = document.getElementById("demo");
const graph = new G6.Graph({
  container,
  width: 500,
  height: 300,
});
graph.data(data);
graph.render();

基本配置 ​

必要配置 ​

• container: string | HTMLElement: Id 或 DOM
• width: number
• height: number

常用配置 ​

画布配置

• renderer: 'canvas' | 'svg'
• fitView: boolean: 是否自适应画布，默认 false
• fitViewPadding: number | number[]: 画布 paddding, fitView 为 true 时生效
• fitCenter: boolean: 是否平移图至画布中心, 默认 fasle(测试发现存在不生效情况, 可以通过 graph.fitCenter() 手动处理)

全局元素配置

• defaultNode
• defaultEdge
• nodeStateStyles
• edgeStateStyles

布局配置

• layout

交互行为

• modes

动画配置

• animate: boolean: 是否启用动画，默认 false
• animateCfg

插件

• plugins: plugin[]

核心概念 ​

图片来自 官网

g6 中，Graph 对象是图的载体，包含了图的元素、呈现、交互 等 操作。

• 图的元素: 包含 Node, Edge, Combo 三大类
• 图的呈现: 根据数据坐标与关系进行渲染，或指定布局自动渲染
• 图的交互: 包括事件的监听与响应，交互行为与状态，交互的动画 等

Graph 的生命周期为：初始化 -> 加载数据 -> 渲染 -> 更新 -> 销毁。