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


关于 Util


Tree-Graph 兼容问题

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

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


Group

不在支持 findByClassName 方法,可以通过以下方式替换:


// G6 3.2
const group = node.get('group')
const label = group.findByClassName('node-label')

// G6 3.3
const group = node.get('group')
const label = group.find(element => element.get('className') === `node-label`);


动画

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

G6.registerEdge('loop-growth', {
  afterDraw(cfg, group) {
    const shape = group.get('children')[0];
    const length = shape.getTotalLength();
    shape.animate({
      onFrame(ratio) {
        const startLen = ratio * length;
        // 计算线的lineDash
        const cfg = {
          lineDash: [startLen, length - startLen]
        };
        return cfg;
      },
      repeat: true
    }, 2000);
  }
}, 'loop');


G6 3.3 版本中动画:

G6.registerEdge('widen-line', {
  afterDraw(cfg, group) {
    const shape = group.get('children')[0];
    const length = shape.getTotalLength();
    shape.animate({
            lineWidth: 10
      },
      {
        repeat: false,
        duration: 500
      });
  }
}, 'single-edge');


G6.registerEdge('loop-growth', {
  afterDraw(cfg, group) {
    const shape = group.get('children')[0];
    const length = shape.getTotalLength();
    shape.animate(
      (ratio) => {
        const startLen = ratio * length;
        // 计算线的lineDash
        const cfg = {
          lineDash: [startLen, length - startLen]
        };
        return cfg;
      },
      {
        repeat: true,
        duration: 2000
      });
  }
}, 'loop');


矩阵变换函数

import { transform } from '@antv/matrix-util';
// 3*3 矩阵变换,用于二维渲染
trasform(m, [
  ['t', x, y], // translate
  ['r', Math.PI], // rotate
  ['s', 2, 2], // scale
]);


元素类型指定

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

// 在数据中单个配置
const data = {
  nodes: [{
    id: 'node0',
    shape: 'circle'
  }, {
    id: 'node1',
    shape: 'rect'
  }],
  edges: [{
    id: 'edge0',
    source: 'node0',
    target: 'node1',
    shape: 'polyline'
  }]
}
// 或在实例化图时全局配置



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


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

G6 3.2 及之前的版本中,自定义节点/边时增加图形可以通过下面代码,不需要指定 name 及 draggable

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


自定义节点/边

继承内置节点/边

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

G6.registerEdge('customNode', {
  draw(cfg, group) {
    // ...
    return keyShape;
  }
});


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


增加图形

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

G6.registerEdge('customNode', {
  draw(cfg, group) {
    const keyShape = group.addShape('rect', {
        attrs: {
        // ... 图形属性
      }
    });
    const circle = group.addShape('circle', {
        attrs: {
        // ... 图形属性
      }
    });
    return keyShape;
  }
});


G6 3.3 中,新增图形时建议指定 name 与 draggable:

G6.registerEdge('customNode', {
  draw(cfg, group) {
    const keyShape = group.addShape('rect', {
        attrs: {
        // ... 图形属性
      },
      draggable: true,
      name: 'key-shape'
    });
    const circle = group.addShape('circle', {
        attrs: {
        // ... 图形属性
      },
      draggable: true,
      name: 'circle-shape'
    });
    return keyShape;
  }
});


pixelRatio

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


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


click-select 与 brush-select 时机事件

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

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


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

brush-select 有两个字段:

click-select 有两个字段: