更新记录

1.0.0(2024-05-27) 下载此版本

0.0


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
× × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

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防止重叠 alt text

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问