[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:export-full-graph-image":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 将完整关系图导出为可下载图像\n\n## 这个示例构建了什么\n\n这个示例构建了一个只读的 relation-graph 查看器，其主要职责是将整张图导出为图像文件。页面展示了一棵从左到右的树，包含白色矩形节点、带标签的曲线连线、一个浮动说明窗口，以及位于底部迷你工具栏中的自定义图像按钮。\n\n用户可以从两个位置触发同一套导出流程：浮动面板和附着在图上的迷你工具栏。关键结果是，导出不依赖当前缩放级别或可见视口，因为图会在截图前专门为图像生成做好准备。\n\n## 数据是如何组织的\n\n图数据是在 `initializeGraph()` 内部声明的一个内联 `RGJsonData` 对象。它包含一个 `rootId`、一个扁平的 `nodes` 数组，以及一个扁平的 `lines` 数组，其中每条线都已经有自己明确的 `id`。\n\n在调用 `setJsonData()` 之前没有繁重的预处理步骤。唯一的准备工作是在代码中定义这份数据集，将其加载到实例中，然后将图居中并适配显示。在真实应用中，同样的数据形态可以表示产品结构、制造系统、子系统拆解、依赖树，或任何需要可用于报告快照的层级结构。\n\n## ",true,500,1782615434899]