G6?TreeGraph樹圖節(jié)點懶加載使用場景示例
更新時間:2023年10月27日 09:15:41 作者:fuGUI
這篇文章主要為大家介紹了G6?TreeGraph樹圖節(jié)點懶加載使用場景示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
場景
最近在使用G6 TreeGrap展示樹形結構數據的時候,由于節(jié)點數量比較多,導致頁面卡頓,甚至崩潰,最后不得不考慮懶加載的形式加載節(jié)點,每次點擊節(jié)點動態(tài)的增加子級節(jié)點。
實現代碼
graph.changeData(data, stack)
更新數據源,根據新的數據重新渲染視圖。
參數
| 名稱 | 類型 | 是否必選 | 描述 |
|---|---|---|---|
| data | Object | false | 圖數據,是一個包括 nodes 和 edges 的對象。若不指定該參數,則使用當前數據重新渲染 |
| stack | boolean | false | 操作是否入 undo & redo 棧,當實例化 Graph 時設置 enableStack 為 true 時,默認情況下會自動入棧,入棧以后,就支持 undo & redo 操作,如果不需要,則設置該參數為 false 即可 |
用法
const data = {
nodes: [
{
id: 'node1',
label: 'node1',
},
{
id: 'node2',
label: 'node2',
},
],
edges: [
{
source: 'node1',
target: 'node2',
},
],
};
// graph是Graph的實例
graph.changeData(data);
// 若不指定該參數,則使用當前圖上的數據重新渲染
graph.changeData();通過對當前節(jié)點的children賦值然后調用graph.changeData()方法即可
// .....
// 節(jié)點點擊事件
graph.on("node:click", function (evt) {
const item = evt.item;
const nodeId = item.get("id");
console.log(nodeId);
const model = item.getModel();
const children = model.children;
if (!children || children.length === 0) {
//點擊節(jié)點獲取下級節(jié)點接口
//...........
const parentData = graph.findDataById(nodeId);
if (!parentData.children) {
parentData.children = [];
}
// 如果childData是一個數組,則直接賦值給parentData.children
// 如果是一個對象,則使用parentData.children.push(obj)
parentData.children = childData;
graph.changeData();
}
});以上就是G6 TreeGraph樹圖節(jié)點懶加載的詳細內容,更多關于G6 TreeGraph樹圖節(jié)點懶加載的資料請關注腳本之家其它相關文章!
相關文章
three.js中正交與透視投影相機的實戰(zhàn)應用指南
在three.js中攝像機的作用就是不斷的拍攝我們創(chuàng)建好的場景,然后通過渲染器渲染到屏幕中,下面這篇文章主要給大家介紹了關于three.js中正交與透視投影相機應用的相關資料,需要的朋友可以參考下2022-08-08

