[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:dagre-layout-integration-and-line-labels":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 将 Dagre 集成到固定布局的 relation-graph 查看器中\n\n## 这个示例构建了什么\n这个示例构建了一个全高的 relation-graph 查看器，用于加载静态有向图，让图先渲染一次，以便为每个节点卡片测量尺寸，然后运行 Dagre，并把计算出的坐标写回到当前场景中。最终得到的是一个包含更大根节点卡片、更小矩形子节点卡片、正交带标签连线、浮动说明与设置窗口以及缩略图覆盖层的图。\n\n用户不会交互式调节布局。图会在挂载时自行完成布局，之后用户可以平移、缩放、通过缩略图查看整体结构、打开画布设置、拖动或最小化辅助窗口，以及导出图片。这个示例的主要教学价值在于“外部布局结果回写”的集成模式，而不是内置布局预设。\n\n## 数据是如何组织的\n图数据在 `initializeGraph()` 内以内联方式声明为一个 `RGJsonData` 对象。它使用 `rootId`、扁平的 `nodes` 数组和扁平的 `lines` 数组。源数据中的节点只包含 id 和 label。位置被有意省略，因为这些位置会在后续由 Dagre 计算。\n\n在最终布局出现之前，还有一些关键的预处理。",true,500,1782615392359]