特别说明 esm 及 commonjs 构建产物不支持 webworker 布局。
**

关于 Util

  • 不再在 G6 中import @antv/util 后，又 export 一次，直接使用 @antv/util 相关方法；
  • 移除了 util/layout 文件；
  • 将 layout 中的 scaleMatrix、floydWarshall、getAdjMatrix 方法移到了 math 文件中；
  • layout 中的 getEDistance 方法与math中的 distance 重复，统一使用 math 中的 distance 方法；
  • 删除了 layout 中的 mix、augment、isString 三个方法，统一使用@antv/util 中相关方法；
  • groupData 改名为 group；
  • group 中删除了 flatToTree 和 addNodesToParentNode 两个方法；
  • base 文件中删除了对@antv/util 的依赖。

Tree-Graph 兼容问题

Graph 新增了布局 相关方法，TreeGraph 中布局相关的需要和 Graph 统一。

  1. changeLayout 修改为 updateLayout；
  2. refreshLayout 修改为 layout。

Group

不在支持 findByClassName 方法，可以通过以下方式替换：

  1. // G6 3.2
  2. const group = node.get('group')
  3. const label = group.findByClassName('node-label')
  5. // G6 3.3
  6. const group = node.get('group')
  7. const label = group.find(element => element.get('className') === `node-label`);

动画

G6 3.2.x 及以下版本中动画的使用方式：

  1. G6.registerEdge('loop-growth', {
  2.   afterDraw(cfg, group) {
  3.     const shape = group.get('children')[0];
  4.     const length = shape.getTotalLength();
  5.     shape.animate({
  6.       onFrame(ratio) {
  7.         const startLen = ratio * length;
  8.         // 计算线的lineDash
  9.         const cfg = {
  10.           lineDash: [startLen, length - startLen]
  11.         };
  12.         return cfg;
  13.       },
  14.       repeat: true
  15.     }, 2000);
  16.   }
  17. }, 'loop');

G6 3.3 版本中动画：

  • 删除了 onFrame 方法；

  • 两种使用 animate 的方式：

    • 方式一：animate(toAttrs, animateCfg)。其中 toAttrs 为动画的目标参数，animateCfg 为动画的配置。例如：

      1. G6.registerEdge('widen-line', {
      2. afterDraw(cfg, group) {
      3. const shape = group.get('children')[0];
      4. const length = shape.getTotalLength();
      5. shape.animate({
      6.        lineWidth: 10
      7.  },
      8.  {
      9.    repeat: false,
      10.    duration: 500
      11.  });
      12. }
      13. }, 'single-edge');

    • 方式二：animate(onFrame, animateCfg)。其中 onFrame 为每一帧的回调函数，animateCfg 为动画的配置。例如：

      1. G6.registerEdge('loop-growth', {
      2. afterDraw(cfg, group) {
      3. const shape = group.get('children')[0];
      4. const length = shape.getTotalLength();
      5. shape.animate(
      6.  (ratio) => {
      7.    const startLen = ratio * length;
      8.    // 计算线的lineDash
      9.    const cfg = {
      10.      lineDash: [startLen, length - startLen]
      11.    };
      12.    return cfg;
      13.  },
      14.  {
      15.    repeat: true,
      16.    duration: 2000
      17.  });
      18. }
      19. }, 'loop');

矩阵变换函数

  • _移除了 Element 上只适用于 3_3 矩阵的变换函数:
    • 🗑 平移函数 translate
    • 🗑 移动函数 move
    • 🗑 缩放函数 scale
    • 🗑 旋转函数 rotate
    • 🗑 以 (0, 0) 点为中心的旋转函数 rotateAtStart
  • 如果想要应用矩阵变换的效果，需要手动设置矩阵的值:
    • 设置矩阵 setMatrix(matrix)
    • 重置矩阵 resetMatrix
    • 设置矩阵 attr('matrix', matrix)
  • 为了方面上层使用，也提供了矩阵变换的工具方法:
    1. import { transform } from '@antv/matrix-util';
    2. // 3*3 矩阵变换，用于二维渲染
    3. trasform(m, [
    4. ['t', x, y], // translate
    5. ['r', Math.PI], // rotate
    6. ['s', 2, 2], // scale
    7. ]);

元素类型指定

G6 3.2.x 及以下版本中指定节点或边的图形类型时，可以通过在数据中单个配置、实例化图时全局配置、更新时动态配置等。例如：

  1. // 在数据中单个配置
  2. const data = {
  3.   nodes: [{
  4.     id: 'node0',
  5.     shape: 'circle'
  6.   }, {
  7.     id: 'node1',
  8.     shape: 'rect'
  9.   }],
  10.   edges: [{
  11.       id: 'edge0',
  12.     source: 'node0',
  13.     target: 'node1',
  14.     shape: 'polyline'
  15.   }]
  16. }
  17. // 或在实例化图时全局配置

G6 3.3 将会使用 type 字段替代 shape 字段（同时兼容 shape，但 shape 在以后的版本中将会被舍弃）。

自定义节点/边时增加图形

G6 3.2 及之前的版本中，自定义节点/边时增加图形可以通过下面代码，不需要指定 name 及 draggable
G6 3.2 及之前的版本中，自定义节点/边时增加图形可以通过下面代码，不需要指定 name 及 draggable 属性，这可能导致节点/边上的非 keyShape 图形不能响应部分事件。

自定义节点/边

继承内置节点/边

G6 3.3 中，自定义节点/边时若不希望继承任何节点/边，则不需要为 registerNode 或 registerEdge 函数的第三个参数传递任何值。且必须重写 draw 方法。

  1. G6.registerEdge('customNode', {
  2.   draw(cfg, group) {
  3.     // ...
  4.     return keyShape;
  5.   }
  6. });

希望继承时，节点的基类为 ‘single-node’，边的基类为 ‘single-edge’，而在 G6 3.2 及之前的版本中节点和边的基类统一为 ‘single-shape’。除了继承基类外，还可以继承其他内置节点或边。

增加图形

G6 3.2 及之前的版本中，自定义节点/边时增加图形可以通过下面代码，不需要指定 name 及 draggable 属性，这可能导致节点/边上的非 keyShape 图形不能响应部分事件。

  1. G6.registerEdge('customNode', {
  2.   draw(cfg, group) {
  3.     const keyShape = group.addShape('rect', {
  4.         attrs: {
  5.         // ... 图形属性
  6.       }
  7.     });
  8.     const circle = group.addShape('circle', {
  9.         attrs: {
  10.         // ... 图形属性
  11.       }
  12.     });
  13.     return keyShape;
  14.   }
  15. });

G6 3.3 中，新增图形时建议指定 name 与 draggable：

  1. G6.registerEdge('customNode', {
  2.   draw(cfg, group) {
  3.     const keyShape = group.addShape('rect', {
  4.         attrs: {
  5.         // ... 图形属性
  6.       },
  7.       draggable: true,
  8.       name: 'key-shape'
  9.     });
  10.     const circle = group.addShape('circle', {
  11.         attrs: {
  12.         // ... 图形属性
  13.       },
  14.       draggable: true,
  15.       name: 'circle-shape'
  16.     });
  17.     return keyShape;
  18.   }
  19. });

pixelRatio

在 G6 3.2 及之前的版本中，需要用户根据当前分辨率在实例化图时配置 pixelRatio。

G6 3.3 中，pixelRatio 将被自动计算，不需要再由用户传递。

click-select 与 brush-select 时机事件

G6 3.2 中 brush-select 与 click-select 每次选取发生变化时，将会触发 nodeselectchange，brush-select 的 nodeselectchange 事件的回调参数含有两个字段：

  • targets：当前被选中的所有节点与边。{nodes: […], edges: […]}
  • select：当前操作是选中还是取消。true | false

click-select 的 nodeselectchange 事件的回调参数含有两个字段：

  • target：当前被操作的一个节点，可能是被选中，或取消选中
  • select：当前操作是选中还是取消。true | false

G6 3.3 统一了这两个 behavior 的 nodeselectchange 事件。使用 selectedItems 替代 targets 字段，表示当前被选中的所有元素。防止 targets 的含义与 target （当前被操作的节点，可能是被选中或被取消选中）混淆。
brush-select 有两个字段：

  • selectedItems：当前被选中的所有节点与边。{nodes: […], edges: […]}
  • select：当前操作是选中还是取消。true | false

click-select 有两个字段：

  • target：当前被操作的一个节点，可能是被选中，或取消选中
  • selectedItems：当前被选中的所有节点与边。{nodes: […], edges: […]}
  • select：当前操作是选中还是取消。true | false