JavaScript is required

叶子节点展开按钮与子节点按需加载

这是一个 relation-graph 示例,展示叶子节点在尚无子节点时也可显示内置展开按钮。点击展开会触发一次性模拟异步加载,通过图实例 API 追加新节点与连线,并重跑树布局让新分支归位。

在 GraphPilot 中编辑

通过叶子节点展开按钮懒加载子节点

这个示例构建了什么

这个示例构建了一个从左向右展开、占满高度的树形图,其中混合了一条静态分支和一条高亮的懒加载分支。画布初始时包含一个已经填充完成的白色 b 子树,以及一个金色的 c 子树;后者的叶子占位节点 c1c2c3 虽然还没有子节点,但已经显示了展开按钮。

用户可以点击这些占位叶子节点上的内置展开按钮,看到持续一秒的 Loading... 覆盖层,然后观察到三个新生成的子节点出现在被展开节点下方。这个示例的重点不是通用的展开或收起行为,而是如何把一个空叶子节点变成一次性懒加载触发器,并在加载后重新执行布局,让新分支稳定地落到正确位置。

数据是如何组织的

数据直接在 initializeGraph() 中以内联方式组装为一个 RGJsonData 对象,其中包含 rootId: 'a'、一个扁平的 nodes 数组和一个扁平的 lines 数组。树的 b 侧一开始就被完整定义,而 c 侧则包含三个占位叶子节点,这些节点在 node.data 中携带了额外元数