antv/g6使用教程及图配置

介绍

G6 是一款由蚂蚁金服 AntV 团队开发的 JavaScript 图形引擎，用于构建各种交互式可视化图形，包括但不限于图表、网络拓扑图、关系图、流程图等。无论是数据分析、决策支持，还是信息可视化，G6 都是一个强大的工具。

以下是 G6 的主要特点和能力：

丰富的图形元素支持：G6 支持多种图形元素，包括节点、边、群组、标签等，这些元素可以被自定义和样式化，以创建各种类型的图形。
交互性：G6 可以实现各种交互功能，如缩放、平移、拖拽、连线、节点拖拽等，以提供丰富的用户体验。
自动布局：G6 提供了多种自动布局算法，如树状布局、圆形布局、力导向布局等。
图表编辑：G6 支持图表的编辑功能，包括添加、删除、编辑节点和边，以及撤销和重做等功能。
扩展性：G6 允许开发人员根据项目需求轻松自定义和扩展功能，包括自定义渲染和交互行为。
多平台支持：G6 可以在浏览器和 Node.js 等环境中使用，这意味着你可以构建 Web 应用和服务器端应用。

使用

HTML中CDN使用

<!DOCTYPE html>
<html><head><title>AntV G6 Demo</title>
</head><body><div id="container"></div><!-- 引用g6 --><script src="https://cdn.jsdelivr.net/npm/@antv/g6@3.7.0/dist/g6.min.js"></script><script>// 创建 G6 图表实例const container = document.getElementById('container');const width = container.scrollWidth;const height = container.scrollHeight || 500;const graph = new G6.Graph({container: container,width: width,height: height,defaultNode: {size: 20,style: {fill: '#C6E5FF',stroke: '#5B8FF9',lineWidth: 0.3,},labelCfg: {style: {fontSize: 12,},position: 'bottom',offset: 1,},},defaultEdge: {style: {lineWidth: 2,color: '#000',labelCfg: {autoRotate: true,refY: 5,style: {fill: '#000'}},endArrow: {fill: '#000',path: G6.Arrow.triangle(10, 12, 25),d: 25}}}});// 定义图表数据const data = {nodes: [{ id: 'node1', x: 100, y: 100, label: 'Node 1' },{ id: 'node2', x: 300, y: 100, label: 'Node 2' },],edges: [{ source: 'node1', target: 'node2', label: 'Edge 1' },],};// 渲染图表graph.data(data);graph.render();</script>
</body>
</html>

npm 包引入

 npm install --save @antv/g6

import G6 from '@antv/g6';

react为例：

import React, {useEffect, useRef} from 'react'
import G6 from '@antv/g6';const  TestG6 = ()=> {const containerRef = useRef<HTMLDivElement>(null);const graphRef = useRef<any>();useEffect(()=>{initDraw()},[])const initDraw=()=>{graphRef.current = new G6.Graph({linkCenter:true,container: containerRef.current || '',height: 800,defaultNode: {size: 20,style: {fill: '#C6E5FF',stroke: '#5B8FF9',lineWidth: 0.3,},labelCfg: {style: {fontSize: 12,},position: 'bottom',offset: 1,},},defaultEdge: {style: {lineWidth: 2,color: '#000',labelCfg: {autoRotate: true,refY: 5,style: {fill: '#000'}},endArrow: {fill: '#000',path: G6.Arrow.triangle(10, 12, 25),d: 25}}}});const data = {nodes: [{ id: 'node1', x: 100, y: 100, label: 'Node 1' },{ id: 'node2', x: 300, y: 100, label: 'Node 2' },],edges: [{ source: 'node1', target: 'node2', label: 'Edge 1' },],};// 渲染图表graphRef.current.data(data);graphRef.current.render();}return (<div className='ModalgraphContainer' ref={containerRef} id="graphContainer"></div>)
}
export default TestG6;