G6?TreeGraph樹圖節(jié)點(diǎn)懶加載使用場景示例
更新時(shí)間：2023年10月27日 09:15:41 作者：fuGUI
這篇文章主要為大家介紹了G6?TreeGraph樹圖節(jié)點(diǎn)懶加載使用場景示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
場景
最近在使用G6 TreeGrap展示樹形結(jié)構(gòu)數(shù)據(jù)的時(shí)候，由于節(jié)點(diǎn)數(shù)量比較多，導(dǎo)致頁面卡頓，甚至崩潰，最后不得不考慮懶加載的形式加載節(jié)點(diǎn)，每次點(diǎn)擊節(jié)點(diǎn)動(dòng)態(tài)的增加子級(jí)節(jié)點(diǎn)。
實(shí)現(xiàn)代碼
graph.changeData(data, stack)
更新數(shù)據(jù)源，根據(jù)新的數(shù)據(jù)重新渲染視圖。
參數(shù)
| 名稱 | 類型 | 是否必選 | 描述 |
|---|---|---|---|
| data | Object | false | 圖數(shù)據(jù)，是一個(gè)包括 nodes 和 edges 的對(duì)象。若不指定該參數(shù)，則使用當(dāng)前數(shù)據(jù)重新渲染 |
| stack | boolean | false | 操作是否入 undo & redo 棧，當(dāng)實(shí)例化 Graph 時(shí)設(shè)置 enableStack 為 true 時(shí)，默認(rèn)情況下會(huì)自動(dòng)入棧，入棧以后，就支持 undo & redo 操作，如果不需要，則設(shè)置該參數(shù)為 false 即可 |
用法
const data = {
nodes: [
{
id: 'node1',
label: 'node1',
},
{
id: 'node2',
label: 'node2',
},
],
edges: [
{
source: 'node1',
target: 'node2',
},
],
};
// graph是Graph的實(shí)例
graph.changeData(data);
// 若不指定該參數(shù)，則使用當(dāng)前圖上的數(shù)據(jù)重新渲染
graph.changeData();通過對(duì)當(dāng)前節(jié)點(diǎn)的children賦值然后調(diào)用graph.changeData()方法即可
// .....
// 節(jié)點(diǎn)點(diǎn)擊事件
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) {
//點(diǎn)擊節(jié)點(diǎn)獲取下級(jí)節(jié)點(diǎn)接口
//...........
const parentData = graph.findDataById(nodeId);
if (!parentData.children) {
parentData.children = [];
}
// 如果childData是一個(gè)數(shù)組，則直接賦值給parentData.children
// 如果是一個(gè)對(duì)象，則使用parentData.children.push(obj)
parentData.children = childData;
graph.changeData();
}
});以上就是G6 TreeGraph樹圖節(jié)點(diǎn)懶加載的詳細(xì)內(nèi)容，更多關(guān)于G6 TreeGraph樹圖節(jié)點(diǎn)懶加載的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
微信小程序?qū)崿F(xiàn)省市區(qū)三級(jí)地址選擇
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)省市區(qū)三級(jí)地址選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了javascript頁面渲染速度測試腳本,計(jì)算瀏覽器渲染HTML頁面所需要的時(shí)間,需要的朋友可以參考下2014-04-04
BootStrapTable服務(wù)器分頁實(shí)例解析
項(xiàng)目中經(jīng)常會(huì)使用到表格，數(shù)據(jù)量大的時(shí)候還需要進(jìn)行分頁，項(xiàng)目設(shè)計(jì)階段，我選擇了bootstrapTable的js插件，個(gè)人覺得這個(gè)框架非常好用，支持服務(wù)器端分頁，此篇主要寫的主要是關(guān)于服務(wù)器分頁,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了使用webpack構(gòu)建應(yīng)用的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Bootstrap每天必學(xué)之表格，向大家分享了幾種最為常用的各種列表展示，希望大家喜歡。2015-11-11
這篇文章主要為大家詳細(xì)介紹一下JavaScript中prototype的使用，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)有一定幫助，需要的可以參考一下2022-05-05
這篇文章主要為大家詳細(xì)介紹了JS+Canvas繪制抽獎(jiǎng)轉(zhuǎn)盤，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
基于Typescript與Axios的接口請(qǐng)求管理詳解
接口是一系列抽象方法的聲明,是一些方法特征的集合,這些方法都應(yīng)該是抽象的,需要由具體的類去實(shí)現(xiàn),然后第三方就可以通過這組抽象方法調(diào)用,讓具體的類執(zhí)行具體的方法,這篇文章主要給大家介紹了基于Typescript與Axios的接口請(qǐng)求管理的相關(guān)資料,需要的朋友可以參考下2021-09-09
通過實(shí)例了解JS執(zhí)行上下文運(yùn)行原理
這篇文章主要介紹了通過實(shí)例了解JS執(zhí)行上下文運(yùn)行原理,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
three.js中正交與透視投影相機(jī)的實(shí)戰(zhàn)應(yīng)用指南
在three.js中攝像機(jī)的作用就是不斷的拍攝我們創(chuàng)建好的場景,然后通過渲染器渲染到屏幕中,下面這篇文章主要給大家介紹了關(guān)于three.js中正交與透視投影相機(jī)應(yīng)用的相關(guān)資料,需要的朋友可以參考下2022-08-08