JavaScript is required
relation-graph 关系数据可视化与编辑解决方案
登录 English GitHub

force-自定义力学布局 2

圆形轨道约束的力学布局

演示高级自定义力学布局，将节点约束为沿同心圆轨道移动，同时应用力导向物理效果以实现分层径向组织。

圆形轨道约束的力学布局

功能概述

此示例演示了一个高级自定义力学布局，在应用力导向物理效果的同时，将节点约束为沿同心圆轨道移动。节点被组织成分层结构（圆形轨道），根节点位于中心，创建一个有组织的径向布局。

核心特性实现

圆形轨道约束

自定义布局强制节点仅沿其指定的圆形轨道移动：

  • 轨道分配：每个节点都有一个 limitCircular 属性，指定它属于哪个圆形轨道
  • 轨道半径：每个圆形层的可配置直径数组
  • 位置计算：getOvalPoint() 函数使用角度和半径计算圆形路径上的位置
const [circularSet, setCircularSet] = useState<number[]>([200, 550, 800, 1020, 1260]);

const updateLayoutCircleSet = async (myLayout: MyForceLayout) => {
    myLayout.setLevelCircleSet(circularSet.map(v => v / 2 - 60));
};

分层节点组织

节点使用自定义属性进行组织：

  • myLevel：样式分类（root、level1-4）
  • myColor：不同分支的配色方案
  • limitCircular：节点应该占据哪个圆形轨道
  • force_weight：移动阻力（较重的节点移动较少）
{ id: 'a', text: '', color: '#cccccc', force_weight: 10000,
  disablePointEvent: true, disableDrag: true,
  data: { myColor: 'root-color', myLevel: 'my-root', limitCircular: 0 } }

固定位置节点

第一层节点固定在最内层轨道的特定位置：

  • 使用 fixed: true 防止力学布局移动它们
  • 使用极坐标手动设置 x、y 坐标
  • 配置 expandHolderPosition 用于折叠按钮位置
leve1NodeForSystem.fixed = true;
let nodePoint = getOvalPoint(rootNodeJson.x, rootNodeJson.y, circularSet[0] / 2, 90);
leve1NodeForSystem.x = nodePoint.x;
leve1NodeForSystem.y = nodePoint.y;
leve1NodeForSystem.expandHolderPosition = 'right';

使用插槽的自定义节点样式

使用 RGSlotOnNode 根据级别渲染不同的节点样式：

  • 根节点显示图像
  • 其他级别显示彩色文本节点
<RGSlotOnNode>
    {({ node }) => {
        return node.data?.myLevel === 'my-root' ? (
            <div className={`my-node ${node.data.myColor} ${node.data.myLevel}`}>
                <div className="node-content">
                    <img src={node.data.img} alt="" />
                </div>
            </div>
        ) : (
            <div className={`my-node ${node.data?.myColor} ${node.data?.myLevel}`}>
                <div className="node-content">
                    <div className="my-node-text">{node.text}</div>
                </div>
            </div>
        );
    }}
</RGSlotOnNode>

可视化圆形轨道

同心圆渲染为绝对定位的 div 元素，使用 CSS 变量进行动态大小调整：

<div style={{ position: 'absolute', left: `${circularSet[4] * -0.5}px`, top: `${circularSet[4] * -0.5}px` }}>
    <div className="c-circle" style={{ '--circle-size': `${circularSet[4]}px` }}>
        <div className="circle-title">Close In-Laws</div>
        {/* 嵌套圆 */}
    </div>
</div>

虚线样式

连线配置了自定义虚线模式并禁用箭头：

graphJsonData.lines.forEach(line => {
    line.dashType = 2;
    line.showEndArrow = false;
});

创意使用场景

  • 家谱可视化：在同心圆中显示代际关系
  • 组织架构图：在径向层中显示部门和团队
  • 网络拓扑：以核心基础设施为中心可视化网络层
  • 太阳系模型：在轨道上显示天体
  • 技能雷达：按类别环组织技能或能力