JavaScript is required

力导向聚类与受控锚点运动

这个示例使用隐藏的零透明度连线,让三组节点在实时力导布局中保持聚类,并通过定时器驱动组锚点围绕根节点运动。它结合插槽节点渲染、画布背景、运行时连线可见性检查、主题切换、`RGMiniView` 以及共享悬浮设置与导出面板,适合作为在内置力求解器之上实现受控运动的参考。

在 GraphPilot 中编辑

在银河风格图中为隐藏连线力导向聚类添加动画

这个示例构建了什么

这个示例构建了一个全屏的力导向布局查看器,其中包含一个中心根节点、三个一级分组节点,以及每个分组下的十二个子标签。可见效果是一个银河风格场景:根节点显示为带电边框的球体,第一圈节点表现得像放大的行星,而子节点则围绕这些移动中的锚点保持聚类。

用户可以启动或停止运动,显示或隐藏通常不可见的连线,在普通外层容器和银河皮肤之间切换,拖动悬浮控制窗口,打开画布设置面板,并将图导出为图片。图本身会持续挂载,而这些控件只负责改变场景的行为和外观。

重点并不只是装饰性样式。更重要的经验是,relation-graph 的力导向布局可以在代码持续移动选定锚点节点的同时保持活跃,并且还能按需显示让每个聚类保持在一起的隐藏支撑连线。

数据是如何组织的

数据保存在一个名为 myJsonData 的内联 RGJsonData 对象中。它声明了 rootId: 'root'、一个扁平的 nodes 数组,以及一个扁平的 lines 数组。整个数据集一共包含 40 个节点:一个固定根节点、三个顶层分组节