自定义节点企业服务宣传卡片
这个示例把固定布局 `RelationGraph` 当作展示画布,通过 `RGSlotOnNode` 渲染一张超大企业宣传卡。它还复用共享悬浮辅助窗提供滚轮/拖拽模式切换和图片导出,更适合作为图谱承载品牌化 UI 的参考,而非布局变化示例。
将 relation-graph 用作固定式宣传卡片画布
这个示例构建了什么
这个示例构建了一个全屏 RelationGraph 视图,它的行为更像是一个展示面板,而不是关系图。示例自带的数据只包含一个根节点且没有连线,这个根节点会被替换为一张 1200 x 600 的企业会员卡片,其中包含品牌文案、服务要点、外部链接,以及一个次级的 3D 内嵌卡片。
用户可以拖动或最小化浮动辅助窗口、打开设置浮层、切换滚轮与画布拖拽行为,并将当前画布导出为图片。这个示例最值得研究的重点并不是布局变化,而是如何把一个固定布局的图,当作承载超大自定义 React 组合内容的宿主画布。
数据是如何组织的
图数据直接在 initializeGraph() 中以内联方式声明为一个很小的 RGJsonData 对象,其中包含 rootId: 'root'、一个节点,以及一个空的 lines 数组。渲染图之前,没有获取数据的步骤、没有外部转换层,也没有额外的派生定位处理。
唯一真正的预处理步骤是执行顺序控制:代码会等待 setJsonData() 完成,然后再调