Relation Graph

功能概述

此示例演示了布局旋转功能，它允许将整个图布局旋转指定的角度。通过滑块控制，用户可以实时旋转图 0-360 度，所有内置布局都支持此功能。这对于调整图的方向以获得更好的视觉效果或适应特定的展示需求特别有用。

核心特性实现

布局旋转配置

核心功能是在布局配置中设置旋转角度：

const reLayout = async () => {
    graphInstance.updateOptions({
        layout: {
            layoutName: layoutName,
            rotate: layoutRotate
        }
    });
    await graphInstance.doLayout();
};

rotate 参数接受 0-360 的角度值，正值顺时针旋转，负值逆时针旋转。

响应式状态更新

使用 React 的 useEffect 监听旋转角度变化并自动重新布局：

useEffect(() => {
    reLayout();
}, [layoutRotate]);

这确保每当 layoutRotate 状态改变时，图会自动重新计算布局。

多种布局支持

该演示展示了旋转功能在不同布局类型中的应用：

<SimpleUISelect
    data={[{ value: 'center', text: 'Center' }, { value: 'tree', text: 'Tree' }]}
    currentValue={layoutName}
    onChange={(newValue: string) => { setLayoutName(newValue); }}
/>

中心布局和树布局都支持旋转，证明了此功能的通用性。

增量旋转控制

提供按钮进行小角度调整：

const addAngle = async (buff: number) => {
    setLayoutRotate(prev => prev + buff);
};

<SimpleUIButton onClick={() => addAngle(5)}>Rotate 5deg CW</SimpleUIButton>
<SimpleUIButton onClick={() => addAngle(-5)}>Rotate 5deg CCW</SimpleUIButton>

这使用户能够进行精细的角度调整。

滑块控制

使用滑块提供直观的角度控制：

<SimpleUISlider
    max={360}
    min={0}
    step={5}
    currentValue={layoutRotate}
    onChange={(newValue: number) => { setLayoutRotate(newValue); }}
/>

滑块范围为 0-360 度，步长为 5 度，提供了良好的精度和易用性平衡。

创意使用场景

演示文稿方向调整

在创建演示文稿或报告时，根据页面布局或幻灯片设计调整图的方向。例如，将树形图旋转以适应横向或纵向的页面布局。

对齐地理方向

在地理或地图相关的可视化中，调整图的方向以匹配真实的地理方向（北、南、东、西），使可视化更直观。

艺术效果和创意设计

使用旋转创建独特的艺术效果。例如，将径向布局旋转到特定角度以创建不对称但视觉上吸引人的设计。

多图对比布局

在并排显示多个图时，使用旋转创建对比效果。例如，将一个图旋转 90 度，另一个旋转 180 度，以展示数据的不同视角。

适应屏幕空间

根据可用屏幕空间调整图的方向。在宽屏设备上，横向布局可能更合适，而在竖屏设备上，纵向布局更好。

数据流向指示

通过旋转图来指示数据流或过程的方向。例如，在流程图中，旋转布局以显示从左到右或从上到下的流程。

时钟和周期性数据可视化

对于表示时间或周期性数据的图，使用旋转来匹配时钟方向或其他周期性参考系统，使数据更易于理解。

中心布局角度偏移

动态图布局旋转