G6（一）认识G6

G6 是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。

G6的特性

具有以下特性：

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

体验G6

安装

bash 复制代码

npm install --save @antv/g6

创建容器

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

jsx 复制代码

import { useRef } from "react";

const QuickStart = () => {
    const containerRef = useRef(null);
    
    return <div ref={containerRef}></div>;
};

export default QuickStart;

准备数据

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

js 复制代码

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。
点和边的其他属性参见链接：内置节点和内置边。

创建关系图

引入G6：

js 复制代码

import G6 from '@antv/g6';

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

js 复制代码

const graph = new G6.Graph({
    container: containerRef.current, // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
    width: 800, // Number，必须，图的宽度
    height: 500, // Number，必须，图的高度
});

配置数据源，渲染

js 复制代码

graph.data(data); // 绑定数据
graph.render(); // 渲染图

效果

代码

jsx 复制代码

import { useRef } from "react";
import G6 from "@antv/g6";
import { useEffect } from "react";

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
        },
    ],
};
const QuickStart = () => {
    const containerRef = useRef(null);
    const graphRef = useRef();
    useEffect(() => {
        if (graphRef.current || !containerRef.current) return;
        const graph = new G6.Graph({
            container: containerRef.current, // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
            width: 800, // Number，必须，图的宽度
            height: 500, // Number，必须，图的高度
        });

        graph.data(data); // 绑定数据
        graph.render(); // 渲染图
        graphRef.current = graph;
    }, []);
    return <div ref={containerRef}></div>;
};

export default QuickStart;