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é)點懶加載的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: