快捷導(dǎo)航

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)的增加子級節(jié)點(diǎn)。

實(shí)現(xiàn)代碼

graph.changeData(data, stack)

更新數(shù)據(jù)源，根據(jù)新的數(shù)據(jù)重新渲染視圖。

參數(shù)

名稱	類型	是否必選	描述
data	Object	false	圖數(shù)據(jù)，是一個(gè)包括 nodes 和 edges 的對象。若不指定該參數(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();

通過對當(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)獲取下級節(jié)點(diǎn)接口
          //...........
          const parentData = graph.findDataById(nodeId);
          if (!parentData.children) {
            parentData.children = [];
          }
          // 如果childData是一個(gè)數(shù)組，則直接賦值給parentData.children
          // 如果是一個(gè)對象，則使用parentData.children.push(obj)
          parentData.children = childData;
          graph.changeData();
        }
      });

以上就是G6 TreeGraph樹圖節(jié)點(diǎn)懶加載的詳細(xì)內(nèi)容，更多關(guān)于G6 TreeGraph樹圖節(jié)點(diǎn)懶加載的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: