antv/g6使用教程及图配置

news2024/10/6 16:29:18

介绍

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;