概述

本文档主要向大家澄清 G6 的中有一部分容易混淆的概念，如有描述不清楚、有误的地方欢迎大家在 GitHub 上提 Issue 指正，或是直接 PR 修缮。根据您的贡献度，我们会视情况将您加入 AntV 共建者名录 :-)

区分 shape

shape 在英文释义中是形状。由于一些历史原因，在 G6 得使用过程过可能会有两个 shape ，现做以下澄清：

  1. G 的 Shape。是底层图形 G 的 shape ，是构成图形元素的最小单位。

  2. G6 的 Shape。沿用了可视化理论中形状视觉通道的概念，用于区分图项绘制的图形对象。

简单举例：

  1. G6.registerNode('rect', {
  2.   getPath(item) {
  3.     const model = item.getModel();
  4.     // G 的 Group，
  5.     const group = item.getGraphicGroup();
  6.     // G 的 Shape，绘制了一个填充为红色的矩形
  7.     const shape = group.addShape('rect', {
  8.       attrs: {
  9.         x: -10,
  10.         y: -10,
  11.         width: 20,
  12.         height: 20,
  13.         fill: 'red'
  14.       }
  15.     });
  16.     return shape;
  17.   }
  18. });
  20. const data = {
  21.   nodes: [{
  22.     id: 'node1',
  23.     x: 100,
  24.     y: 200,
  25.     shape: 'rect' // G6 的 shape
  26.   }]
  27. };
  28. const graph = new G6.Graph({
  29.   container: 'mountNode',
  30.   width: 500,
  31.   height: 500
  32. });
  33. graph.read(data);

区分 group

group 在英文释义中是群组的意思。由于一些历史原因，在 G6 得使用过程过可能会有两个 group ，现做以下澄清：

  1. G 的 Group。是底层图形 G 的 group ，是图形元素的容器。

  2. G6 的 Group。能容纳图项的特殊图项。

简单举例：

  1. G6.registerNode('rect', {
  2.   getPath(item) {
  3.     const model = item.getModel();
  4.     const group = item.getGraphicGroup(); // G 的 group
  5.     const shape = group.addShape('rect', {
  6.       attrs: {
  7.         x: -10,
  8.         y: -10,
  9.         width: 20,
  10.         height: 20,
  11.         fill: 'red'
  12.       }
  13.     });
  14.     return shape;
  15.   }
  16. });
  18. const data = {
  19.   nodes: [{
  20.     id: 'node1',
  21.     x: 100,
  22.     y: 200,
  23.     shape: 'rect'
  24.   }],
  25.   groups: [
  26.     {
  27.       id: 'group1',  // G6 的 group
  28.     }
  29.   ]
  30. };
  31. const graph = new G6.Graph({
  32.   container: 'mountNode',
  33.   width: 500,
  34.   height: 500
  35. });
  36. graph.read(data);