重点部分
一、创建画布
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返回对应的实例
