更新记录

1.0.0（2024-05-27）

0.0

平台兼容性

G6

G6的简介

G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。

图的数据格式

一般图 Graph

图配置 G6.Graph(cfg)

Graph 是 G6 图表的载体，所有的 G6 节点实例操作以及事件，行为监听都在 Graph 实例上进行。Graph 的初始化通过 new 进行实例化，实例化时需要传入需要的参数。

// highlight-start
new G6.Graph(cfg: GraphOptions) => Graph
// highlight-end

const graph = new G6.Graph({
  container: '', // 图的 DOM 容器，可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象。
  width: 500, // 指定画布宽度，单位为 'px'，默认为画布容器宽度。
  height: 500, // 指定画布高度，单位为 'px'，默认为画布容器高度。
  modes: { // 设置画布的交互模式
    default: ['drag-canvas'], // default 模式中包含点击选中节点行为和拖拽画布行为;
  },
  fitView:true, // 是否开启画布自适应。开启后图自动适配画布大小。
  fitViewPadding:100,// fitView 为 true 时生效。图适应画布时，指定四周的留白。
  fitCenter:true, // v3.5.1 后支持。*开启后，图将会被平移，图的中心将对齐到画布中心，但不缩放。优先级低于 fitView。
  layout: { // 布局配置项
    type: 'radial', //  type 字段指定使用的布局方式，type 可取以下值：random随机, radial辐射形, mds高维数据降维 , circular环形, 力导布局fruchterman, force, gForce, forceAtlas2, dagre层次, concentric同心圆, grid格子
    center: [500, 300], // 布局的中心
  },
   defaultNode: { // 默认节点
     // ... 其他属性
     style: {
       fill: '#steelblue',
       stroke: '#eaff8f',
       lineWidth: 5,
       // ... 其他属性
     },
   },
   defaultEdge: { // 默认边
     // ... 其他属性
     style: {
       stroke: '#eaff8f',
       lineWidth: 5,
       // ... 其他样式属性
     },
   },
});

数据 graph.data(data)

设置图初始化数据。

const data = {
  // 节点 节点总览:https://g6.antv.antgroup.com/manual/middle/elements/nodes/default-node
  nodes: [
    {
      id: 'node1', // 可随机生成
      label: 'node1', // 文本内容
      type:'circle', // 元素的图形
      size: 40, // 元素的大小
      visible: true,        // 控制初次渲染显示与隐藏，若为 false，代表隐藏。默认不隐藏
      labelCfg: {           // 标签配置属性
        positions: 'center',// 标签的属性，标签在元素中的位置
        style: {            // 包裹标签样式属性的字段 style 与标签其他属性在数据结构上并行
          fontSize: 12      // 标签的样式属性，文字字体大小
          // ...            // 标签的其他样式属性
        }
      }
      // ...,               // 其他属性
      style: {              // 包裹样式属性的字段 style 与其他属性在数据结构上并行
        fill: '#000',       // 样式属性，元素的填充色
        stroke: '#888',     // 样式属性，元素的描边色
        // ...              // 其他样式属性
      }
    },
    {
      id: 'node2',
      label: 'node2',
    },
  ],
  // 边 边总览:https://g6.antv.antgroup.com/manual/middle/elements/edges/default-edge
  edges: [
    {
      //与节点中的id相对应
      source: 'node1', // 来源
      target: 'node2', // 目标
      style: {
        endArrow:true, // 结束端绘制默认箭头
        startArrow:true, // 开始端绘制默认箭头
        stroke:'#f00',
        ...  // 样式属性，每种边的详细样式属性参见各边文档
      }
    },
  ],
};

// graph 是 Graph 的实例
graph.data(data);

渲染与更新 graph.render()

根据提供的数据渲染视图。

graph.render();

graph.read(data)

接收数据，并进行渲染，read 方法的功能相当于 data 和 render 方法的结合。

graph.read(data);

树图 treeGraph

TreeGraph 是 G6 专门为树图场景打造的图。G6.TreeGraph 与 G6.Graph 最大的区别就是数据结构和内置布局计算。主要考虑：
数据结构：树图的数据一般是嵌套结构，边的数据隐含在嵌套结构中，并不会特意指定 edge 。此布局要求数据中一个节点需要有 id 和 children 两个数据项.
布局特殊性：1.树图的布局算法一般是不改变源数据的，而是重新生成一份数据，将源数据作为新数据的一个属性。2.树图的每次新增/删除/展开/收缩节点，都需要重新计算布局。

// highlight-start
new G6.TreeGraph(cfg: GraphOptions) => TreeGraph
// highlight-end

const treeGraph = new G6.TreeGraph({
  container: 'mountNode',
  width: 800,
  height: 600,
  modes: {
    default: [
      {
        type: 'collapse-expand',
        onChange(item, collapsed) {
          const icon = item.get('group').findByClassName('collapse-icon');
          if (collapsed) {
            icon.attr('symbol', EXPAND_ICON);
          } else {
            icon.attr('symbol', COLLAPSE_ICON);
          }
        },
      },
      'drag-canvas',
      'zoom-canvas',
    ],
  },
  layout: {
    type: 'dendrogram',
    direction: 'LR', // H / V / LR / RL / TB / BT
    nodeSep: 50,
    rankSep: 100,
    radial: true,
  },
});

const data = {
  id: 'root',
  children: [
    {
      id: 'subTree1',
      children: [...]
    },
    {
      id: 'subTree2',
      children: [...]
    }
  ]
};

树图布局 TreeGraph Layout

Graph 布局与 TreeGaph 布局相互不通用。G6 的内置树图布局有：CompactBox 紧凑树布局、Dendrogram 生态树布局、Indented 缩进树布局、Mindmap 脑图树布局

const graph = new G6.TreeGraph({
  // ...                      // 其他配置项
  layout: {                // Object，对于 TreeGraph 为必须字段
    type: 'dendrogram',
    direction:'LR',
    radial:false,// 是否按照辐射状布局
    ...                    // 布局的其他配置
  }
});

插件 Plugins

G6 提供了一些可插拔的组件，包括：
Legend:是 G6 内置的图例插件。用于说明图中不同类型的节点和边所代表的含义，并可以通过与图例的交互做简单的高亮和过滤.v4.3.0 起支持。
SnapLine:是 G6 内置的对齐线插件。 v4.3.0 起支持
Grid:在画布上绘制了网格。
Minimap:是用于快速预览和探索图的工具。
ImageMinimap:采用另一种机制，根据提供的图片地址或 base64 字符串 graphImg 绘制 代替 minimap 上的 canvas。该方法可以大大减轻两倍 canvas 绘制的压力。
Edge Bundling:在关系复杂、繁多的大规模图上，通过边绑定可以降低视觉复杂度。
Menu
ToolBar
TimeBar
Tooltip
Fisheye
EdgeFilterLens

// 引入 G6 后，首先实例化需要使用的某插件对象。然后，在实例化图时将其配置到 plugins 中：
// 实例化 Grid 插件
const grid = new G6.Grid();
const minimap = new G6.Minimap();
const graph = new G6.Graph({
  //... 其他配置项
  plugins: [grid, minimap], // 配置 Grid 插件和 Minimap 插件
});

图形样式属性 Shape Attr

学习过程中遇到的问题

GraphOptions.container

设置为空，页面一直白屏，是因为没有将需要渲染的dom元素的id传入进去

GraphOptions.layout

三个节点渲染连线在一条线上重叠,添加preventOverlap防止重叠

layout:{
  type: 'dagre', // Dagre 是一种层次布局
  rankdir:'LR', // 展示方向
  nodesep:40, // 节点间距
  ranksep:50, // 层间距
  preventOverlap:true // 防止重叠
}

vue报错

main.js:10 [Vue warn]: Error in created hook: "Error: invalid container"

在created钩子函数中没法获取DOM,解决办法有：在mounted中渲染dom成功以后在创建节点；使用nextTick