重点部分

一、创建画布

1、new G6.Graph(cfg) 创建实例

2、包含内容：

container/width/height/modes/plugins/layout/

        // 初始化画布
        const container = document.getElementById('job-tree-graph');
        const width = container.scrollWidth;
        const height = container.scrollHeight || 600;
        graph.current = new G6.TreeGraph({
          container: 'job-tree-graph',
          width,
          height,
          modes: {
            default: ['zoom-canvas', 'drag-canvas'],
          },
          plugins: [tooltip],
          layout: {
            type: 'indented',
            direction: 'LR',
            dropCap: false,
            indent: 200,
            getHeight: () => {
              return 40;
            },
          },
        });

二、常用方法

• 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()获取实例的包围盒

三、graph method

• graph.save()
• graph.read(data) 读数据渲染
• 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) 阻止动画
• getShape(x,y)返回该坐标点最上层的元素。
• findById(id)根据元素ID返回对应的实例