JavaScript is required

分页懒加载分支节点

这个示例展示如何在左到右企业关系树中对投资与股东分支进行分页懒加载。首批数据在分支展开时加载,后续分页通过图内合成的 `Load More(...)` 节点触发;悬浮辅助窗可调分页大小并提供共享画布设置与图片导出。

在 GraphPilot 中编辑

通过图内 Load More 节点延迟加载分页分支

这个示例构建了什么

这个示例围绕一个焦点公司构建了一个偏查看器风格的企业关系树。画布上展示了一个大型蓝色根卡片、四个按类型划分的投资与股东分类分支节点,以及只有在用户展开这些分支后才会出现的普通公司节点。

其核心行为是在图内部按分支进行分页。某个分支第一次展开时会拉取第一页,后续页面通过一个作为图节点渲染的合成 Load More(...) 节点来请求,同时还提供了一个浮动辅助窗口,让用户可以调整分页大小,并继续使用共享的画布设置和图片导出工具。

数据是如何组织的

初始图数据是一个内联的 RGJsonData 种子,其中包含一个根节点和四个分支节点。每个分支都通过 data.myType 标识其数据来源,并通过 childrenLoaded 防止第一页被重复拉取。

分页数据并不来自初始图 JSON。mock-data-api.ts 预先生成了四个模块级公司数组,并暴露了 fetchMockDataFromRemoteServer(...),它会针对某一种分支类型返回一个带延迟的分页切