介绍

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

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

  1. 丰富的图形元素支持：G6 支持多种图形元素，包括节点、边、群组、标签等，这些元素可以被自定义和样式化，以创建各种类型的图形。

  2. 交互性：G6 可以实现各种交互功能，如缩放、平移、拖拽、连线、节点拖拽等，以提供丰富的用户体验。

  3. 自动布局：G6 提供了多种自动布局算法，如树状布局、圆形布局、力导向布局等。

  4. 图表编辑：G6 支持图表的编辑功能，包括添加、删除、编辑节点和边，以及撤销和重做等功能。

  5. 扩展性：G6 允许开发人员根据项目需求轻松自定义和扩展功能，包括自定义渲染和交互行为。

  6. 多平台支持：G6 可以在浏览器和 Node.js 等环境中使用，这意味着你可以构建 Web 应用和服务器端应用。

使用

  1. 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>
  1. 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;

效果如下：
在这里插入图片描述
从例子可以看出，g6的数据结构就是node（点）、edge（边）组成。点需要id，边需要source(起点id)，target(终点id)。就可以绘制出简单的图了。

Graph 图配置

必须配置：

  • container：图的容器，可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象
  • width、height：画布容器的宽高

常用配置：

  • modes: 用于配置图表的交互模式，如缩放、平移、选择等。可以通过配置不同的模式来控制用户的交互操作。

  • layout: 用于指定图表的布局算法，如树状布局、圆形布局、力导向布局等。

  • defaultNode: 默认节点的样式配置，包括节点的形状、颜色、大小、标签等。

  • defaultEdge: 默认边的样式配置，包括边的类型、颜色、标签等。

  • nodeStateStyles: 定义节点的不同状态下的样式，例如 hover、selected 等。

  • edgeStateStyles: 定义边的不同状态下的样式，例如 hover、selected 等。

  • nodeStyle: 用于为特定节点定义自定义样式函数，可以根据节点的数据动态设置样式。

  • edgeStyle: 用于为特定边定义自定义样式函数，可以根据边的数据动态设置样式。

  • defaultNodeSize: 默认节点的大小。

  • defaultEdgeSize: 默认边的大小。

  • minZoom: 允许的最小缩放比例。

  • maxZoom: 允许的最大缩放比例。

  • fitView: 是否自动缩放以适应容器大小。

  • fitViewPadding: 缩放自适应时的内边距。

  • animate: 是否启用动画效果，以及动画的配置项，如持续时间、缓动函数等。

  • plugins: 图表插件的配置，用于扩展图表的功能，如 tooltip、contextMenu 等。

  • autoPaint: 是否启用自动重绘，如果禁用，需要手动调用 graph.paint() 来渲染图表。

  • minZoom: 最小缩放比例。

  • maxZoom: 最大缩放比例。

  • defaultNodeShape: 默认节点的形状，可以是矩形、圆形、椭圆等。

  • defaultEdgeShape: 默认边的形状，可以是直线、曲线等。

本篇文章就介绍到这吧，后续会持续性解读g6的文档，更深入的探讨如何使用g6

# 前端
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

第二届openEuler生态大会（中国·湖南）成功举办

10月30日，第二届openEuler生态大会（中国·湖南）成功举办。

avatar 开放原子开发者工作坊

“小满”安全车控操作系统正式在AtomGit开源

10月24日，由中国汽车工业协会指导，普华基础软件股份有限公司主办的“小满”安全车控操作系统开源发布会暨共建计划说明会成功举行。普华基础软件宣布将安全车控操作系统“小满”（简称“小满”）V24.10源代码正式在开放原子开源基金会（简称“基金会”）旗下AtomGit开源协作平台开源，并在AtomGit平

avatar 开放原子开发者工作坊

开放原子大赛——CIKM 2024赛果揭晓，10强争霸，角逐第33届国际信息与知识管理大会

开放原子大赛——CIKM 2024赛果揭晓，10强争霸，角逐第33届国际信息与知识管理大会

avatar 开放原子开发者工作坊