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