G6 TreeGraph树图节点懒加载使用场景示例
作者：fuGUI
这篇文章主要为大家介绍了G6 TreeGraph树图节点懒加载使用场景示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
场景
最近在使用G6 TreeGrap展示树形结构数据的时候，由于节点数量比较多，导致页面卡顿，甚至崩溃，最后不得不考虑懒加载的形式加载节点，每次点击节点动态的增加子级节点。
实现代码
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();通过对当前节点的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树图节点懒加载的资料请关注脚本之家其它相关文章！