投资与股东关系探查
这个示例渲染围绕焦点公司的关系探查图,图内可控制投资、股东和历史投资分支。它结合按类型的懒加载(通过追加 RGJsonData 片段)、布局后展开占位归一化、自定义节点插槽,以及用于画布设置和图片导出的共享悬浮面板。
通过懒加载分支展开的投资与股东关系探索器
这个示例构建了什么
这个示例围绕一家焦点公司构建了一个以阅读为主的企业关系探索器。画布一开始会显示一个根公司卡片,以及图内的三个分支控制项 Investment、Share Holder 和 Historical Investment,因此用户无需离开图本身,就可以打开不同方向的关系分支。
在视觉上,最终效果是一棵从左到右展开的业务树,包含白色公司卡片、蓝色控制节点、蓝色根卡片、正交连接线,以及带图案的分析风格背景。用户可以展开公司节点或控制节点以加载更多分支,点击空白画布清除选中状态,拖动或最小化浮动辅助窗口,在设置面板中切换滚轮和拖拽行为,并将当前图导出为图片。
这个示例的主要看点并不只是懒加载,而是类型化的控制节点导航、渐进式图增长以及布局后的清理如何结合在一起,使上游和下游关系分支能够在同一棵树中以不同的阅读方式呈现。
数据是如何组织的
初始图数据在 initializeGraph() 中以内联方式作为一个 RGJsonData 对象进行初始化。这个种子数据声明了 `rootId: 'ro