【React】AntV G6 - 快速入手

环境

• react： ^18
• next: 14.1.0
• @antv/g6: ^4.8.24

安装

npm install @antv/g6

# or
pnpm add @antv/g6

# or 
yarn add @antv/g6

使用

模拟数据

const data = {
   
  nodes: [ // 节点信息
    {
   
      id: "node1",
      data: {
   
        name: "Circle1"
      }
    },
    {
   
      id: "node2",
      data: {
   
        name: "Circle2"
      }
    }
  ],
  edges: [ // 边线
    {
   
      id: "edge1",
      source: "node1",
      target: "node2"
    }
  ]
};

示例

创建ForceGraph组件

// file: component/ForceGraph/index.tsx
"use client"

import type {
    GraphOptions, GraphData } from '@antv/g6';