Relation Graph

功能概述

此示例演示了缩略图小地图功能，它提供整个图的鸟瞰图并指示当前可见区域。小地图在紧凑视图中显示所有节点的位置并显示代表当前视口的矩形。用户可以在小地图中拖动视口指示器以快速导航图。

核心特性实现

MiniView 组件

RGMiniView 组件提供缩略图功能：

<RGMiniView width={`${miniViewSize.width}px`} height={`${miniViewSize.height}px`} position={miniViewPosition as RGWidgetPosition} />

该组件显示所有节点的缩小视图和当前视口矩形。

位置配置

小地图可以放置在任何角落：

<SimpleUISelect
    data={[
        { value: 'tl', text: 'Top-Left' },
        { value: 'tr', text: 'Top-Right' },
        { value: 'bl', text: 'Bottom-Left' },
        { value: 'br', text: 'Bottom-Right' }
    ]}
    currentValue={miniViewPosition}
    onChange={(newValue: string) => { setMiniViewPosition(newValue); }}
/>

四个角落位置为不同的 UI 布局提供了灵活性。

大小自定义

用户可以调整小地图的宽度和高度：

<SimpleUISlider currentValue={miniViewSize.width} min={50} max={500} step={10} onChange={(newValue) => {setMiniViewSize({...miniViewSize, width: newValue});}} />
<SimpleUISlider currentValue={miniViewSize.height} min={50} max={500} step={10} onChange={(newValue) => {setMiniViewSize({...miniViewSize, height: newValue});}} />

从 50px 到 500px 的范围允许紧凑或详细的缩略图。

基于 CSS 的样式

该演示指出，可以通过 CSS 应用额外的样式：

<div className="py-1 text-sm">You can also continue to freely adjust the thumbnail position and appearance through CSS styles.</div>

这允许除内置选项之外的完全视觉自定义。

随机节点样式

为了有效地演示小地图，节点具有不同的颜色和大小：

myJsonData.nodes.forEach(node => {
    node.color = randomColorRange[Math.floor(Math.random() * randomColorRange.length)];
    node.width = 30 + Math.floor(Math.random() * 200);
    node.height = 30 + Math.floor(Math.random() * 200);
    node.nodeShape = Math.random() < 0.3 ? RGNodeShape.circle : RGNodeShape.rect;
});

这种多样性使小地图在视觉上更有趣，对导航更有用。

创意使用场景

大图导航

用于探索大图（数百或数千个节点），其中平移和缩放可能会迷失方向。小地图帮助用户保持空间感知并高效导航。

地图和地形可视化

适应于小地图显示较小比例地图版本的地理可视化。用户可以看到当前视口位置相对于整个地理区域。

平面图和建筑物导航

创建用于导航复杂平面图或建筑物布局的工具。小地图显示整个平面图，而视口显示当前正在查看的房间或部分。

CAD 和工程图纸

在需要总览缩略图的大型技术图纸的 CAD 软件中实施。工程师可以快速跳转到复杂原理图的不同部分。

基因组和分子图谱

在生物信息学中用于导航大型基因组或分子相互作用图谱。小地图帮助研究人员在大量数据集中找到感兴趣的区域。

项目管理和时间线视图

创建具有大型甘特图或时间线可视化的项目管理工具。小地图允许管理者快速导航到不同的时间段。

游戏关卡编辑器

为游戏开发构建关卡编辑器，其中小地图显示整个关卡布局。设计人员可以快速导航到大型游戏世界的不同区域。

网络和基础设施地图

用于需要监控大型网络拓扑的网络运营中心。小地图在操作员专注于特定网络段时提供上下文。

缩略示意图（鹰眼）