图 Graph

什么是 Graph

中文字“图”在大家的传统认知里指的是图画、图像，而图论与可视化中的“图”—— Graph 则有着更精确的定位：主体（objects）与关系（relationships）的组成。它甚至不局限于视觉，主体与关系的数据也可以称为图。—— 摘自 AntV 专栏文章：Graph Visualization · 知多少 之 《HelloWorld图可视化》

在 G6 中，Graph 对象是图的载体，它包含了图上的所有元素（节点、边等），同时挂载了图的相关操作（如交互监听、元素操作、渲染等）。Graph 对象的生命周期为：初始化 —> 加载数据 —> 渲染 —> 更新 —> 销毁。

在 快速上手 中，我们简单介绍了 初始化、加载数据、渲染图 的使用方法。本文将主要介绍初始化/实例化图。

前提代码

本文的讲解将会基于下面这份内嵌 JavaScript 的 HTML 代码。该代码通过定义数据、实例化图、读取数据、渲染图等操作中完成了下图中简单的图：图 Graph - 图1

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Tutorial Demo</title>
  6. </head>
  7.   <body>
  8.     /* 图的画布容器 */
  9.     <div id="mountNode"></div>
  10.     /* 引入 G6 */
  11.     <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js"></script>
  12.     <script>
  13.       // 定义数据源
  14.       const data = {
  15.         // 点集
  16.         nodes: [{
  17.           id: 'node1',
  18.           x: 100,
  19.           y: 200
  20.         },{
  21.           id: 'node2',
  22.           x: 300,
  23.           y: 200
  24.         }],
  25.         // 边集
  26.         edges: [
  27.           // 表示一条从 node1 节点连接到 node2 节点的边
  28.           {
  29.             source: 'node1',
  30.             target: 'node2'
  31.           }
  32.         ]
  33.       };
  35.       // 创建 G6 图实例
  36.       const graph = new G6.Graph({
  37.         container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应
  38.         // 画布宽高
  39.         width: 800,
  40.         height: 500
  41.       });
  42.       // 读取数据
  43.       graph.data(data);
  44.       // 渲染图
  45.       graph.render();
  46.     </script>
  47.   </body>
  48. </html>

初始化/实例化图

通过 new G6.Graph(config) 进行图的实例化。其中参数 config 是 Object 类型的图的配置项，图的大部分功能可以通过该配置项进行全局配置。如 前提代码 这样实例化图：

  1. const graph = new G6.Graph({
  2.   container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应
  3.   // 画布宽高
  4.   width: 800,
  5.   height: 500,
  6. });

必要配置项

上面代码中实例化 Graph 的部分使用了三个必要的配置项：

  • container

    类型：String | Object。图的 DOM 容器。可以是 String，为 DOM 容器的 id。也可以是 Object ，为 DOM 对象。

  • width、height

    类型：Number。图的画布的宽度和高度。

常用配置项

下面列举实例化图时常见的配置项，完整的配置项参见 Graph API。

整体渲染相关

  • renderer

    1. 类型：String；选项：<code>&#39;svg&#39;</code> | <code>&#39;canvas&#39;</code>；默认：<code>&#39;canvas&#39;</code>。选择 SVG 或 Canvas 方式渲染。

  • fitView

    1. 类型：Boolean；默认：&#39;false&#39;。图是否自适应画布。

  • fitViewPadding

    1. 类型：Number | Array；默认：0。图自适应画布时的四周留白像素值。fitView 为 true 时生效。

全局元素配置

  • defaultNode

    1. 类型：Object。默认情况下全局节点的配置项，包括样式属性和其他属性。详见 [内置节点]($3f10b06b6d6f7899.md)。

  • defaultEdge

    1. 类型：Object。默认情况下全局边的配置项，包括样式属性和其他属性。详见 [内置边](https://antv-g6.gitee.io/zh/docs/manual/middle/elements/nodes/defaultEdge)。

  • nodeStateStyles

    1. 类型：Object。除默认状态外的其他状态下节点的样式配置。详见 [状态 State]($10f2fc0062c6224f.md)。

  • edgeStateStyles

    1. 类型：Object。除默认状态外的其他状态下边的样式配置。详见 [状态 State]($10f2fc0062c6224f.md)。

布局相关

  • layout

    1. 类型：Object。若数据中不存在节点位置，则默认为随机布局。配置布局类型及其参数。详见 [使用布局 Layout]($80cfc7940d6187b8.md)，[Layout API](https://antv-g6.gitee.io/zh/docs/api/layout/Layout)。

交互行为相关

  • modes

    1. 类型：Array。配置多种交互模式及其包含的交互事件的。详见 [交互模式 Mode]($a58823f0366225c3.md)。

动画相关

  • animate

    1. 类型：Boolean；默认：&#39;false&#39;。是否启用全局动画。启用后，布局变化时将会以动画形式变换节点位置。

  • animateCfg

    1. 类型：Object。全局动画的配置项，包括动画效果、动画时长等。详见 【TODO】。

插件

  • plugins

    1. 类型：Array。配置辅助插件。详见 [插件与工具]($a0cbf1f25b47bcef.md)。

常用函数

在前面的代码中使用了两个必要的函数：

  1. // 读取数据
  2. graph.data(data);
  3. // 渲染图
  4. graph.render();
  • data(data)：读取数据源 data 到图实例 graph 中。
  • render()：渲染图。

Graph 的完整函数参见 Graph API。