美文网首页
4.2-antv/g6

4.2-antv/g6

作者: 懒羊羊3号 | 来源:发表于2019-05-21 17:30 被阅读0次

    前言

    1. g有点类似于zrender
    1. 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 刷新
    

    相关文章

      网友评论

          本文标题:4.2-antv/g6

          本文链接:https://www.haomeiwen.com/subject/fqzjzqtx.html