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é)點懶加載的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要為大家詳細介紹了微信小程序實現省市區(qū)三級地址選擇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了javascript頁面渲染速度測試腳本,計算瀏覽器渲染HTML頁面所需要的時間,需要的朋友可以參考下2014-04-04
項目中經常會使用到表格，數據量大的時候還需要進行分頁，項目設計階段，我選擇了bootstrapTable的js插件，個人覺得這個框架非常好用，支持服務器端分頁，此篇主要寫的主要是關于服務器分頁,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了使用webpack構建應用的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
Bootstrap每天必學之表格，向大家分享了幾種最為常用的各種列表展示，希望大家喜歡。2015-11-11
這篇文章主要為大家詳細介紹一下JavaScript中prototype的使用，文中的示例代碼講解詳細，對我們學習有一定幫助，需要的可以參考一下2022-05-05
這篇文章主要為大家詳細介紹了JS+Canvas繪制抽獎轉盤，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
接口是一系列抽象方法的聲明,是一些方法特征的集合,這些方法都應該是抽象的,需要由具體的類去實現,然后第三方就可以通過這組抽象方法調用,讓具體的類執(zhí)行具體的方法,這篇文章主要給大家介紹了基于Typescript與Axios的接口請求管理的相關資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了通過實例了解JS執(zhí)行上下文運行原理,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-06-06
three.js中正交與透視投影相機的實戰(zhàn)應用指南
在three.js中攝像機的作用就是不斷的拍攝我們創(chuàng)建好的場景,然后通過渲染器渲染到屏幕中,下面這篇文章主要給大家介紹了關于three.js中正交與透視投影相機應用的相關資料,需要的朋友可以參考下2022-08-08