前言
- g有點類似于zrender
- g6定制化了很多圖形
g6文檔
antv/g 重點部分
創(chuàng)建，注意id
var canvas = new Canvas({
containerId: 'c1', // 指定畫布容器
width: 500, // 畫布寬度
height: 600 // 畫布高度
});
方法
- draw()畫布的繪制方法。新增shape或group后坯苹，調(diào)用此方法將最新的內(nèi)容渲染到畫布上糙俗。
- changeSize(width, height)改變畫布的大小
- getClientByPoint(x, y)將窗口坐標轉(zhuǎn)換為canvas坐標震捣。
- getPointByClient(x, y)將canvas坐標轉(zhuǎn)換為窗口坐標。
- on(eventType, callback)綁定事件邑狸。
- off(eventType, callback)事件解綁。
- addShape(shape, attrs)添加單個圖形到畫布涤妒。
- addGroup(attrs)添加單個組到畫布单雾。
- attr()設(shè)置或獲取實例的繪圖屬性，無參數(shù)獲取她紫，有參數(shù)更新
- set(name, value)設(shè)置實例的屬性硅堆，如visible, zIndex, id等。
- get(name)獲取實例的屬性值
- show()顯示某實例對應(yīng)的圖形贿讹。
- hide()隱藏某實例對應(yīng)的圖形
- remove()刪除實例本身
- destroy()銷毀實例
- getBBox()獲取實例的包圍盒
group的方法
- getShape(x,y)返回該坐標點最上層的元素渐逃。
- findById(id)根據(jù)元素ID返回對應(yīng)的實例。
antv/g6
- new G6.Graph(cfg) 創(chuàng)建實例
- container/width/height/modes/plugins/layout/
- graph.save()
- graph.read(data) 讀數(shù)據(jù)渲染
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) 尋找數(shù)據(jù)模型
- graph.add(type, model)
- graph.remove(item)
- graph.update(item, model) item為id或 項對象
- graph.getItems();獲取圖內(nèi)所有項
- graph.getNodes()
- graph.getEdges()
- graph.getGroups()
- graph.preventAnimate(callback) 阻止動畫
preventAnimate(callback) {
this.set('_forcePreventAnimate', true);
callback();
this.set('_forcePreventAnimate', false);
return this;
}
為了提高效率民褂，數(shù)據(jù)導(dǎo)入茄菊、導(dǎo)出簡單一致，G6 2.0 中取消映射數(shù)據(jù)和原始數(shù)據(jù)的隔離助赞，并把映射的泛化為一般的映射概念买羞，用戶可以往里面寫入任何值，任何映射規(guī)則雹食。例如：
graph.edge({
custom: customValue
});
G6 3.0和2.0區(qū)別
3.0
渲染的時候載入與渲染分開
graph.data(data) 加載
graph.render() 渲染
刷新
graph.refreshItem(id)
graph.refresh()
draw update setstate
sgape.attr
setItemState
2.0
graph.read(data) 加載渲染不分開
update 刷新
