[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:custom-graph-instance-mixed-layout":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 使用自定义 `GraphInstance` 加载数据并组合两种布局\n\n## 这个示例构建了什么\n\n这个示例构建了一个偏查看器风格的 `relation-graph` 场景，在一个全高画布中渲染两组彼此断开的数据。左侧呈现为一个居中的小型圆形节点簇，使用直线连接；右侧则呈现为一棵从左到右展开的树，节点是更宽的矩形，并带有弯曲且带标签的边。\n\n用户不会直接编辑图内容。他们会查看预先构建好的场景，使用右下角的内置工具栏，拖动或最小化浮动辅助窗口，在其设置面板中切换滚轮和拖拽行为，并将当前画布导出为图片。这里的关键点在于，这个混合场景由一个自定义 `RelationGraphCore` 子类持有，而不是仅通过组件层面的按钮处理器来拼装。\n\n## 数据如何组织\n\n图数据在 `MyGraph.tsx` 中声明为两个内联的 `RGJsonData` 对象：根节点为 `a` 的 `myLeftJsonData`，以及根节点为 `2` 的 `myRightJsonData`。示例没有把它们合并为一个载荷再调用 `setJsonData(...)`，而是把这两个对象都放在 `graphOptions.",true,500,1782615436921]