连通子图布局与主题切换
这个示例构建了一个全屏图谱工作台,在同一块画布上挂载两组彼此断开的 relation-graph 数据集。用户点击任意节点后,会选中该节点所属的整个连通分量,然后通过一个跟随选区移动的悬浮工具栏,仅切换这个连通分量的主题或布局。图谱覆盖层中始终显示一个 minimap,同时还有一个可拖拽的辅助窗口,用于暴露画布设置和导出图片功能。
为单个连通分量切换主题和布局
这个示例构建了什么
这个示例构建了一个全屏图谱工作台,在同一块画布上挂载两组彼此断开的 relation-graph 数据集。用户点击任意节点后,会选中该节点所属的整个连通分量,然后通过一个跟随选区移动的悬浮工具栏,仅切换这个连通分量的主题或布局。图谱覆盖层中始终显示一个 minimap,同时还有一个可拖拽的辅助窗口,用于暴露画布设置和导出图片功能。
这个示例的关键结果是:在混合画布中进行局部编辑。这个 demo 不会一次性重设整个图谱的样式或重新布局。它会保持另一个断开的网络孤岛不变,只对当前选中的连通分量进行重新着色、重设形状、重排连线和重新布置。
数据是如何组织的
MyGraph.tsx 内联定义了两个 RGJsonData 对象:network1JsonData 和 network2JsonData。每个对象都包含自己的 rootId、nodes 和 lines。这两组数据通过分别调用 addNodes() 和 addLines() 推入同一个图实例,因此画布初始状态就是一个包含两个断开