Relation Graph

功能概述

此示例展示了中心布局算法，它将根节点放置在画布中心，然后将其他节点均匀分布在根节点周围，形成径向布局结构。这种布局特别适合展��以单个中心节点为核心的关系网络，例如社交网络中的人物及其关系。

核心特性实现

中心布局配置

使用 center 布局类型：

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'center'
    }
};

中心布局会自动将根节点放在中心，其他节点围绕排列。

动态形状切换

支持节点和线条形状的实时切换：

const [nodeShape, setNodeShape] = React.useState<number>(RGNodeShape.circle);
const [lineShape, setLineShape] = React.useState<number>(RGLineShape.StandardStraight);

<SimpleUISelect
    data={[
        { value: RGNodeShape.rect, text: 'Rect' },
        { value: RGNodeShape.circle, text: 'Circle' }
    ]}
    currentValue={nodeShape}
    onChange={(newValue: number) => { setNodeShape(newValue); }}
/>

用户可以在圆形和矩形节点之间切换。

根据形状调整节点尺寸

根据节点形状自动调整大小：

graphInstance.getNodes().forEach((node) => {
    if (nodeShape === RGNodeShape.circle) {
        graphInstance.updateNode(node, {
            nodeShape,
            width: 70,
            height: 70
        });
    } else {
        graphInstance.updateNode(node, {
            nodeShape,
            width: 0,  // 0 表示自动计算
            height: 0
        });
    }
});

圆形使用固定尺寸，矩形使用自动尺寸计算。

连接点动态调整

根据线条形状调整连接点：

graphInstance.getLines().forEach((line) => {
    if (lineShape === RGLineShape.StandardStraight) {
        graphInstance.updateLine(line, {
            lineShape,
            fromJunctionPoint: RGJunctionPoint.border,
            toJunctionPoint: RGJunctionPoint.border,
            useTextOnPath: textOnPath
        });
    } else {
        graphInstance.updateLine(line, {
            lineShape,
            fromJunctionPoint: RGJunctionPoint.ltrb,
            toJunctionPoint: RGJunctionPoint.ltrb,
            useTextOnPath: textOnPath
        });
    }
});

直线使用边界连接，折线和曲线使用四向连接。

线条文本路径控制

控制线条文本是否沿路径显示：

<SimpleUISelect
    data={[
        { value: false, text: 'Normal' },
        { value: true, text: 'Text On Path' }
    ]}
    onChange={(newValue: boolean) => setTextOnPath(newValue)}
    currentValue={textOnPath}
/>

启用后，文本会沿着线条的曲线路径排列。

响应式更新

使用 useEffect 监听形状变化并自动更新：

useEffect(() => {
    updateMyGraphData();
}, [nodeShape, lineShape, textOnPath]);

任何形状或文本选项的改变都会触发图更新。

创意使用场景

社交网络可视化

展示个人在社交网络中的关系，中心人物放在中间，朋友、同事围绕分布。可以清晰看到社交圈层。

组织架构中心化视图

以 CEO 或核心领导为中心，展示其直接下属和间接汇报关系。适合展示扁平化组织结构。

知识图谱中心节点

以核心概念为中心，展示相关知识领域和概念。适合教育工具或知识管理系统。

产品生态系统

以核心产品为中心，展示相关的插件、扩展、配件和服务。适合产品营销和展示。

影响力分析

以关键人物或组织为中心，展示其影响力范围。可以用于政治、商业或学术影响力分析。

网络拓扑中心

以核心服务器或路由器为中心，展示网络设备连接。适合 IT 基础设施管理。

概念思维导图

以中心主题为核心，展示相关的子主题和详细想法。适合头脑风暴和创意工具。

情感关系映射

以个人为中心，展示家庭成员、朋友、同事等不同类型的关系。适合心理学或社会工作。

服务依赖图

以核心服务为中心，展示依赖它的下游服务和它依赖的上游服务。适合微服务架构可视化。

地理中心辐射

以城市为中心，展示周边城镇、交通线路和区域。适合城市规划或交通分析。

中心布局(center)

辐射状中心布局