[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:custom-node-expand-button-slot":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 使用插槽渲染徽章的自定义节点展开控件\n\n## 本示例构建的内容\n\n本示例构建了一个全高层级查看器，其主要教学重点并不是数据集本身，而是替换 relation-graph 默认的展开/折叠控件。图谱初始时以居中的矩形树形结构展示类似子系统的节点，使用锚定到边框的直线连线，并在每个可展开节点的右侧渲染一个粉色胶囊形控件。\n\n用户可以查看层级结构，并通过这个自定义控件切换分支。其中一个分支会在初始化后立即折叠，因此自定义控件在折叠和展开两种状态下都会可见，而不是只在手动交互之后才出现。\n\n## 数据如何组织\n\n数据来自一个本地异步辅助函数，它返回一个包含 `rootId`、`nodes` 和 `lines` 的根 JSON 对象。节点记录仅包含简单的 `id` 和 `text` 字段，而连线记录则使用 `from`、`to` 和 `text` 描述父子关系，这使得该结构可以很容易替换为设备树、产品分解结构、子系统图或其他层级依赖数据。\n\n在图谱加载之前，代码会执行一个很小的预处理步骤：遍历 `lines`，当某条关系记录尚未包含 `id` 时为其补上兜底 `id`。完成这一步标准化后，示",true,500,1782615421270]