Antv G6入门之旅--combo图

目录

什么是AntV G6

G6 的特性

G6 文档

安装

1 在项目中使用 NPM 包引入

2 在 HTML 中使用  CDN 引入

使用

Step 1 创建容器

Step 2 数据准备

Step 3 创建关系图

Step 4 配置数据源，渲染

React 中使用 G6

Combo图

---

什么是AntV G6

        G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight，为数据科学家和开发者提供了一种全新的方式来展示和探索数据。我曾经使用过 ECharts 与 D3.js，当我遇见 AntV G6 后，突感惊喜，其内含丰富的效果与强大的功能。相对于 ECharts，AntV G6 的图表种类更多，也更灵活，更容易上手；而相对于 D3.js，AntV G6 的 API 更为简单易用，适合快速上手。

        基于 G6，用户可以快速搭建自己的 图分析 或 图编辑 应用。

        如果您还没有使用过 G6， 建议通过 快速上手 抢先体验 G6 的魅力。

G6 的特性

G6 作为一款专业的图可视化引擎，具有以下特性：

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

除了默认好用、配置自由的内置功能，元素、交互、布局均具有高可扩展的自定义机制。

G6 文档

• G6 入门教程
• G6 核心概念
• G6 扩展阅读
• API
• G6 Blog

安装

1 在项目中使用 NPM 包引入

Step 1: 使用命令行在项目目录下执行以下命令：

npm install --save @antv/g6

Step 2: 在需要用的 G6 的 JS 文件中导入：

import G6 from '@antv/g6';

2 在 HTML 中使用  CDN 引入

// version <= 3.2
 
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-{$version}/build/g6.js">script>
 
// version >= 3.3
 
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/{$version}/dist/g6.min.js">script>
 
// version >= 4.0
 
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js">script>

⚠️ 注意:

• 在  {$version} 中填写版本号，例如  3.7.1；
• 最新版可以在  NPM  查看最新版本及版本号；
• 详情参考 Github 分支：GitHub - antvis/G6: ♾ A Graph Visualization Framework in JavaScript。

使用

        你可以通过以下的代码来创建一个基础的图形：

import G6 from '@antv/g6';  
  
const graph = new G6.Graph({  
  container: 'mountNode', // 指定挂载节点的id  
  width: 800,              // 指定图形的宽度  
  height: 600,             // 指定图形的高度  
});

        在这里，我们创建了一个基础的图形实例。

        创建一个 G6 的关系图仅需要下面几个步骤：

1. 创建关系图的 HTML 容器；
2. 数据准备；
3. 创建关系图；
4. 配置数据源，渲染。

Step 1 创建容器

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

<div id="mountNode">div>

Step 2 数据准备

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

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

Step 3 创建关系图

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

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

Step 4 配置数据源，渲染

graph.data(data); // 读取 Step 2 中的数据源到图上
graph.render(); // 渲染图

React 中使用 G6

如果你想在 React 中使用 G6 ，可以参考我们提供了的 React 中使用 G6 的 Demo。

更多关于 React 中如何使用 G6，请参考 React 中使用 G6 的文档。有任何问题都可以通过页面底部的钉钉交流群和我们沟通，也非常欢迎给我们提 issues 或 PR： GitHub - antvis/G6: ♾ A Graph Visualization Framework in JavaScript。

Combo图

        接下来，让我们来创建一些节点和边，组成一个Combo图。

        Combo图是一种特殊的图形，它结合了多种图形类型（比如节点图和边图）的优点。在AntV G6中，你可以通过简单地组合不同的节点类型和边类型来创建Combo图。以下是一个创建Combo图的例子：

import G6 from '@antv/g6';  
  
const data = {  
  nodes: [  
    { id: 'node1', label: 'Node 1', type: 'circle' },  
    { id: 'node2', label: 'Node 2', type: 'rect' },  
    { id: 'node3', label: 'Node 3', type: 'ellipse' },  
  ],  
  edges: [  
    { source: 'node1', target: 'node2', type: 'line' },  
    { source: 'node2', target: 'node3', type: 'curve' },  
    { source: 'node3', target: 'node1', type: 'arrow' },  
  ],  
};  
  
const graph = new G6.Graph({  
  container: 'mountNode', // 指定挂载节点的id  
  width: 800,              // 指定图形的宽度  
  height: 600,             // 指定图形的高度  
});  
  
graph.data(data);           // 加载数据  
graph.render();             // 渲染图形

        在这个例子中，我们创建了一个包含三种节点类型（圆形、矩形和椭圆形）和三种边类型的Combo图。每个节点都有自己的类型，并且每条边都有自己的类型。通过这种方式，我们可以创建出非常复杂且富有表现力的Combo图。

        此外，AntV G6还提供了许多其他的配置项，例如节点的样式、边的样式、标签、动画等等。你可以通过阅读官方文档来了解更多关于AntV G6的信息。这些配置项可以让你更加灵活地控制你的Combo图的表现形式。例如：

graph.node(node => {  
  return {  
    type: node.shape, // 根据节点数据定义节点类型  
    style: {  
      fill: node.color, // 根据节点数据定义节点颜色  
      // 其他样式设置...  
    },  
    label: {  
      text: node.label, // 根据节点数据定义标签文本  
      // 其他标签设置...  
    },  
  };  
});

        实现一个复杂combo：

// 缩略图
const minimap = new G6.Minimap({
    size: [150,100],
    type: "delegate"
});
 
// 右键菜单
const contextmenu = new G6.menu({...});
 
// 节点提示框
const tooltip = new G6.Tooltip({...});
 
// 边框提示框
const edgetooltip = new G6.Tooltip({...});
 
 
// 画布
const graph = new G6.Graph({
    container: "g6",
    width: _this.data.width,
    height: _this.data.height,
    sortByCombo: true,
    fitView: true,
    enabledStack: true,
    defaultNode: {
        type: "image",
        img: _this.data.nodesLegend.url,
        size: [50],
        style: {
            cursor: "pointer"
        }
    },
    defaultEdge: {
        type: "line",
        style: {
            cursor: "pointer"
        },
        labelCfg: {
            position: "start",
            autoRotate: true,
            refX: 10,
            refY: 10
        }
    },
    groupByTypes: false,
    defaultCombo: {
        type: "rect",
        style: {
            fill: "#f3f9ff",
            stroke: "a3b1bf",
            lineWidth: 1
        },
        labelCfg: {
            refY: 10,
            position: "top",
            style: {
                fontSize: 12
            }
        }
    },
    nodeStateStyles: {...},
    edgeStateStyles: {...},
    comboStateStyles: {...},
    modes: {
        default: [ ...],
        ...,
        // 分区，可拖拽画布、缩放画布、拖拽节点、拖拽combo、shift矩形框选、自定义增加combo、自定义删除combo
        editCombo: [
            {
                type: "drag-canvas",
                enableOptimize: true
            },
            {
                type: "zoom-canvas",
                sensitivity: 1.8
            },
            {   // 禁止拖动到空白画布
                type: "drag-node",
                delegate: false,
                onlyChangeComboSize: false,
                shouldEnd: (s, e, self) => {
                    if (e) return true;
                    return false; 
                }
            },
            {
                type: "drag-combo",
                enableDelegate: true,
                onlyChangeComboSize: true
            },
            {   // shift+左键，矩形框选
                type: "brush-select",
                brushStyle: {
                    fill: "lightblue",
                    fillOpacity: 0.2,
                    stroke: "lightblue",
                    lineWidth: 1
                }
            },
            {   // 双击combo 收缩/展开
                type: "collapse-expand-combo",
                trigger: "dblclick",
                relayout: false // 收缩展开后，不重新布局
            },
            // 自定义编辑节点
            "click-add-combo", // 新增
            "delete-combo" // 删除
        ],
    },
    plugins: [minimap, contextmenu, tooltip, edgetooltip]
})
 
G6.registerBehavior("click-add-combo", {});
G6.registerBehavior("delete-combo", {});
            
graph.setMode(mode);
graph.zoom(zoom);
graph.data(this.data);
graph.render();
this.data.graph = graph;

实现效果