JavaScript is required

依次展开图谱

这是一个 relation-graph 示例:加载内联系统树后先折叠所有可展开分支,再从根节点自动回放展开。它结合递归 `expandNode(...)`、定时停顿、画布动画和重复视口适配,使呈现更像引导式播放而非手动披露。

在 GraphPilot 中编辑

深度优先树展开回放

这个示例构建了什么

这个示例构建了一个全高树形查看器,它会从根节点向外回放整个层级结构,而不是等待用户点击展开控件。屏幕上展示的是一个带有矩形节点和曲线标签连线的树图,并且图会在组件挂载后立即自动展开。

这个示例的核心在于回放行为。代码会先加载完整的层级结构,折叠所有仍然有子节点的分支,然后通过短暂停顿让树一步步展开。在这个过程中,视口会持续重新居中并适配当前可见图形,以保证展开过程始终清晰可读。

数据是如何组织的

数据直接在 initializeGraph() 内以内联方式声明,采用标准的 RGJsonData 风格树形载荷结构,包含 rootIdnodeslines。每个节点都是简单的 { id, text } 对象,每条边都是 { from, to, text } 关系,并用 Subsystem 作为连接标签。

在把数据传给 setJsonData() 之前,示例会先遍历 lines 数组,并为每条连线补充一个合成 id,例如 line_0line_1。这里没有远程获