前端可视化 - AntV G6 图形

图形Shape

G6中图形Shape类似html中的内置元素，html，div,p, span等

G6 中的元素（节点/边）是由一个或多个图形 Shape 组成，主要通过自定义节点或自定义边时在 draw 方法中使用 group.addShape 添加，G6 中支持以下的图形 Shape：

• circle：圆；
• rect：矩形；
• ellipse：椭圆；
• polygon：多边形；
• fan：扇形；
• image：图片；
• marker：标记；
• path：路径；
• text：文本；
• dom(svg)：DOM（图渲染方式 renderer 为 'svg' 时可用）。

具有一些属性和方法：

group.addShape('rect', {
  attrs: {
    fill: 'red',
    shadowOffsetX: 10,
    shadowOffsetY: 10,
    shadowColor: 'blue',
    shadowBlur: 10,
    opacity: 0.8,
  },
  // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
  name: 'rect-shape',
});

attr()

Shape 的生命周期

当用户需要自定义节点、自定义边、自定义 Combo 时，需要了解 Shape 的生命周期。使用内置节点/边/ Combo 则可以跳过这一部分内容。

从整体来看，Shape 的生命周期分为：

• 初始化渲染；
• 更新；
• 操作；
• 销毁。

Shape 作为 Graph 上的核心元素，这几个阶段都需要考虑，但是销毁可以交给 Graph 来处理，所以在定义 Shape 时不需要考虑，仅需要考虑三个阶段即可：

• 绘制：从无到有的绘制 Shape 及文本；

• 更新：数据发生改变导致 Shape 及文本发生变化；

• 操作：给 Shape 添加状态，如：selected，active 等。

• 所以我们在设计自定义节点/边/ Combo 时，定义了三个方法，若需要自定义节点/边/ Combo ，需要有选择性地复写它们：

• draw(cfg, group): 绘制，提供了绘制的配置项（数据定义时透传过来）和图形容器，必须返回合理的图形作为 keyShape；

• update(cfg, n): 更新，更新时的配置项（更新的字段和原始字段的合并）和元素对象；可用来做性能优化

• setState(name, value, item): 响应节点/边/ Combo 状态的变化。

图形分组：Group

// 获取元素的group
const group = item.getContainer()

// 向分组中添加新的分组
const subGroup = group.addGroup({
  id: 'rect'
})

// 向分组中添加新的图形
cont keyShape = group.addShape('rect', {
    attrs: {
        stroke: 'red'
    },
    name: 'react-shape'
})