JavaScript is required

自定义 GraphInstance 混合布局

这个示例用自定义 `RelationGraphCore` 子类替换默认 relation-graph 内核,从 `graphOptions.data` 读取两份内联数据并组合为“中心布局 + 树布局”的同画布场景。它是 provider 级图内核注入、自定义 `doLayout()` 编排和单画布混合布局组合的聚焦参考。

在 GraphPilot 中编辑

使用自定义 GraphInstance 加载数据并组合两种布局

这个示例构建了什么

这个示例构建了一个偏查看器风格的 relation-graph 场景,在一个全高画布中渲染两组彼此断开的数据。左侧呈现为一个居中的小型圆形节点簇,使用直线连接;右侧则呈现为一棵从左到右展开的树,节点是更宽的矩形,并带有弯曲且带标签的边。

用户不会直接编辑图内容。他们会查看预先构建好的场景,使用右下角的内置工具栏,拖动或最小化浮动辅助窗口,在其设置面板中切换滚轮和拖拽行为,并将当前画布导出为图片。这里的关键点在于,这个混合场景由一个自定义 RelationGraphCore 子类持有,而不是仅通过组件层面的按钮处理器来拼装。

数据如何组织

图数据在 MyGraph.tsx 中声明为两个内联的 RGJsonData 对象:根节点为 amyLeftJsonData,以及根节点为 2myRightJsonData。示例没有把它们合并为一个载荷再调用 setJsonData(...),而是把这两个对象都放在 `graphOptions.