4.2-antv/g6

前言

1. g有点类似于zrender

• zrender
• g的文档

2. g6定制化了很多图形
   g6文档

antv/g 重点部分

创建，注意id

var canvas = new Canvas({
  containerId: 'c1',      // 指定画布容器
  width: 500,           // 画布宽度
  height: 600         // 画布高度
});

方法

• draw()画布的绘制方法。新增shape或group后，调用此方法将最新的内容渲染到画布上。
• changeSize(width, height)改变画布的大小
• getClientByPoint(x, y)将窗口坐标转换为canvas坐标。
• getPointByClient(x, y)将canvas坐标转换为窗口坐标。
• on(eventType, callback)绑定事件。
• off(eventType, callback)事件解绑。
• addShape(shape, attrs)添加单个图形到画布。
• addGroup(attrs)添加单个组到画布。
• attr()设置或获取实例的绘图属性，无参数获取，有参数更新
• set(name, value)设置实例的属性，如visible, zIndex, id等。
• get(name)获取实例的属性值
• show()显示某实例对应的图形。
• hide()隐藏某实例对应的图形
• remove()删除实例本身
• destroy()销毁实例
• getBBox()获取实例的包围盒

group的方法

• getShape(x,y)返回该坐标点最上层的元素。
• findById(id)根据元素ID返回对应的实例。

antv/g6

• new G6.Graph(cfg) 创建实例
  • container/width/height/modes/plugins/layout/
• graph.save()
• graph.read(data) 读数据渲染

  read(data) {
    if (!data) {
      throw new Error('please read valid data!');
    }
    const ev = {
      action: 'changeData',
      data
    };
    this.emit('beforechange', ev);
    this.preventAnimate(() => {
      this.clear();
      this.source(data);
      this.render();
    });
    this.emit('afterchange', ev);
    return this;
  }

• graph.find(id) 寻找数据模型
• graph.add(type, model)
• graph.remove(item)
• graph.update(item, model) item为id或 项对象
• graph.getItems();获取图内所有项
• graph.getNodes()
• graph.getEdges()
• graph.getGroups()
• graph.preventAnimate(callback) 阻止动画

  preventAnimate(callback) {
    this.set('_forcePreventAnimate', true);
    callback();
    this.set('_forcePreventAnimate', false);
    return this;
  }

为了提高效率，数据导入、导出简单一致，G6 2.0 中取消映射数据和原始数据的隔离，并把映射的泛化为一般的映射概念，用户可以往里面写入任何值，任何映射规则。例如：

graph.edge({
  custom: customValue
});

G6 3.0和2.0区别

3.0

渲染的时候载入与渲染分开
graph.data(data) 加载
graph.render() 渲染

刷新
graph.refreshItem(id)
graph.refresh()
draw update setstate
sgape.attr
setItemState

2.0

graph.read(data)  加载渲染不分开
update 刷新