展开节点时按需加载子节点
这是一个自上而下树图示例:在折叠分支展开时按需懒加载子节点。它把返回的图数据片段追加到实时 relation-graph 实例中,重新执行布局,并同时展示页面级与节点级加载反馈。
通过延迟加载子节点来展开树
这个示例实现了什么
这个示例构建了一棵自上而下的树,当用户展开已标记的节点时,树会继续增长。初始图数据被刻意保持得较小,然后在某个折叠分支按需请求更多后代节点时,把它们追加到现有的 relation-graph 实例中,而不是替换整份数据集。
在界面上,用户会看到米色矩形节点、正交连接线、位于底部的展开控件,以及悬浮在画布上方的白色工具窗口。在异步展开期间,页面会显示加载遮罩,当前活动节点也会显示自己的 spinner 徽标,因此很容易识别正在解析的分支。
这个演示最有价值的点不只是延迟加载本身,而是一次性分支加载、对新追加后代递归重复这一模式,以及在插入新片段后显式重新布局这三者的组合。
数据如何组织
这张图使用 RGJsonData,包含一个 rootId、一个扁平的 nodes 数组和一个扁平的 lines 数组。初始数据集在 initializeGraph() 中创建,其中有一个节点预先标记了 expanded: false、expandHolderPosition: 'bottom' 和 `d