javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > G6 TreeGraph树图节点懒加载

G6 TreeGraph树图节点懒加载使用场景示例

作者:fuGUI

这篇文章主要为大家介绍了G6 TreeGraph树图节点懒加载使用场景示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

场景

最近在使用G6 TreeGrap展示树形结构数据的时候,由于节点数量比较多,导致页面卡顿,甚至崩溃,最后不得不考虑懒加载的形式加载节点,每次点击节点动态的增加子级节点。

实现代码

graph.changeData(data, stack)

更新数据源,根据新的数据重新渲染视图。

参数

名称类型是否必选描述
dataObjectfalse图数据,是一个包括 nodes 和 edges 的对象。若不指定该参数,则使用当前数据重新渲染
stackbooleanfalse操作是否入 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();

通过对当前节点的children赋值然后调用graph.changeData()方法即可

// .....
// 节点点击事件
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) {
          //点击节点获取下级节点接口
          //...........
          const parentData = graph.findDataById(nodeId);
          if (!parentData.children) {
            parentData.children = [];
          }
          // 如果childData是一个数组,则直接赋值给parentData.children
          // 如果是一个对象,则使用parentData.children.push(obj)
          parentData.children = childData;
          graph.changeData();
        }
      });

以上就是G6 TreeGraph树图节点懒加载的详细内容,更多关于G6 TreeGraph树图节点懒加载的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文