Relation Graph

功能概述

此示例演示了图容器尺寸动态调整功能。通过改变容器的宽度和高度，图会自动适应新的尺寸。当尺寸变化时触发 onViewResize 事件，可以重新计算布局或调整视图以确保最佳显示效果。

核心特性实现

动态尺寸控制

使用状态管理容器尺寸：

const [currentSize, setCurrentSize] = useState(400);

<SimpleUISelect
    data={[
        { value: 400, text: '400' },
        { value: 600, text: '600' },
        { value: 800, text: '800' },
        { value: 1000, text: '1000' }
    ]}
    currentValue={currentSize}
    onChange={(newValue: number) => {
        setCurrentSize(newValue);
    }}
/>

提供预设尺寸选项，用户可以快速切换不同的容器大小。

响应式容器样式

应用动态样式到容器：

<div
    className="border-2 border-red-600 shadow-xl"
    style={{
        width: currentSize + 'px',
        height: currentSize + 'px',
        position: 'relative'
    }}
>
    <RelationGraph options={graphOptions} onViewResize={onViewResize} />
</div>

容器的宽度和高度直接使用状态值，红色边框清晰显示容器边界。

尺寸变化处理

实现 onViewResize 回调处理尺寸变化：

const onViewResize = () => {
    console.log('onViewResize');
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();
};

<RelationGraph options={graphOptions} onViewResize={onViewResize} />

当容器尺寸改变时，自动将图移动到中心并调整缩放以适应新尺寸。

相对定位容器

使用 position: relative 确保图容器正确定位：

<div style={{height: '100vh'}}>
    <div className="p-5">...</div>
    <div style={{position: 'relative'}}>
        <RelationGraph />
    </div>
</div>

外层容器提供垂直布局，内层容器使用相对定位以支持绝对定位的子元素。

溢出处理

外层容器允许溢出滚动：

<div className="my-graph overflow-auto" style={{height: '100vh'}}>

当图容器大于视口时，用户可以滚动查看全部内容。

创意使用场景

响应式布局设计

创建适应不同屏幕尺寸的响应式图布局：

const [containerSize, setContainerSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
});

useEffect(() => {
    const handleResize = () => {
        setContainerSize({
            width: window.innerWidth,
            height: window.innerHeight
        });
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
}, []);

打印和导出预览

在打印前预览不同页面尺寸下的图显示效果。用户可以选择 A4、A3 等标准纸张尺寸进行预览。

分屏比较

创建分屏视图，在两个不同尺寸的容器中显示同一个图或不同的图，方便比较和分析。

移动设备适配

为移动设备优化图显示，在小屏幕上自动调整容器尺寸和缩放级别。

嵌入式小部件

将图嵌入到更大的应用程序界面中，作为信息面板或数据可视化组件。

自适应卡片布局

在卡片式布局中，每个卡片包含一个图，卡片尺寸根据可用空间自动调整。

动画尺寸过渡

添加平滑的尺寸过渡动画：

<div
    style={{
        width: currentSize + 'px',
        height: currentSize + 'px',
        transition: 'width 0.3s ease, height 0.3s ease'
    }}
>
    <RelationGraph />
</div>

最小/最大尺寸限制

设置容器的最小和最大尺寸限制：

const clampedSize = Math.max(300, Math.min(currentSize, 1200));

确保图容器不会太小导致不可读，或太大影响页面布局。

监听图谱大小变化

动态容器尺寸调整与自动重排