概述

本文档主要向大家介绍如何拓展 G6 的群组( Group )，如有描述不清楚、有误的地方欢迎大家在 GitHub 上提 Issue 指正，或是直接 PR 修缮。根据您的贡献度，我们会视情况将您加入 AntV 共建者名录 :-)

提示 : 在使用自定义图项之前，应尽量熟练掌握绘图引擎 G 的使用。
提示 : Group 继承于 Node ，享有 Node 的所有接口。

注册 — registerGroup

我们通过以下接口往 G6 全局注册群组：

  1. // 注册群组
  2. G6.registerGroup(name, {
  3.   // 绘制
  4.   draw(item) {
  5.     return keyShape
  6.   },
  7.   // 获取锚点
  8.   anchor: array || object || callback
  9. }, extendShape);

绘制 — draw

draw() 是图项最终绘制的接口，决定了一个图项最终画成什么样。它是G6 中拓展图形的最小接口。我们可以按照下述接口拓展群组图形，例如：

自定义群组 - 图1

  1. G6.registerGroup('custom', {
  2.   draw(item) {
  3.     const group = item.getGraphicGroup();
  4.     const childrenBox = item.getChildrenBBox();
  5.     group.addShape('text', {
  6.       attrs: {
  7.         x: childrenBox.x,
  8.         y: childrenBox.y,
  9.         text: '这是一个群组',
  10.         fill: 'red'
  11.       }
  12.     });
  13.     return group.addShape('rect', {
  14.       attrs: {
  15.         ...childrenBox,
  16.         stroke: 'red'
  17.       }
  18.     });
  19.   }
  20. });
  21. const data = {
  22.   nodes: [{
  23.     id: 'node1',
  24.     x: 100,
  25.     y: 200,
  26.     label: '节点1',
  27.     parent: 'group1'
  28.   },{
  29.     id: 'node2',
  30.     x: 300,
  31.     y: 200,
  32.     label: '节点2',
  33.     parent: 'group1'
  34.   }],
  35.   edges: [{
  36.     id: 'edge1',
  37.     target: 'node2',
  38.     source: 'node1'
  39.   }],
  40.   groups: [{
  41.     id: 'group1',
  42.     label: '群组'
  43.   }]
  44. };
  45. const graph = new G6.Graph({
  46.   container: 'mountNode',
  47.   fitView: 'cc',
  48.   width: 500,
  49.   height: 500,
  50. });
  51. graph.group({
  52.   shape: 'custom'
  53. });
  54. graph.read(data);

锚点 — anchor

与 自定义节点 中自定义锚点一致。