多线路间距配置

演示对连接同一对节点的多条线之间的间距的控制，以便在复杂关系中保持视觉清晰度。

多线路间距配置

功能概述

此示例演示了如何控制连接同一对节点的多条线之间的间距。这在处理双向关系或实体之间的多个连接时对于保持视觉清晰度至关重要。

核心特性实现

1. 多线距离设置

配置平行线之间的最大间距：

const graphOptions: RGOptions = {
    multiLineDistance: 50,  // 多条线之间的最大间距
    defaultJunctionPoint: RGJunctionPoint.border,  // 必须使用 border 以获得正确效果
    defaultLineShape: RGLineShape.StandardCurve
};

2. 动态间距调整

实时更新间距值：

const updateMyGraphData = async () => {
    graphInstance.updateOptions({
        multiLineDistance: multiLineGap
    });
    graphInstance.getLines().forEach((line) => {
        graphInstance.updateLine(line, {
            lineShape,
            useTextOnPath: textOnPath
        });
    });
};

3. 边界连接点要求

要使多条线正确显示为平行线，请使用 RGJunctionPoint.border：

defaultJunctionPoint: RGJunctionPoint.border

4. 线条形状兼容性

不同的线条形状与多条线配合使用：

• RGLineShape.StandardStraight - 直接平行线
• RGLineShape.StandardCurve - 曲线平行线

5. 交互式控件

提供 UI 控件以进行实时实验：

<SimpleUISlider
    currentValue={multiLineGap}
    min={5}
    max={60}
    step={2}
    onChange={(newValue) => { setMultiLineGap(newValue); }}
/>

创意使用场景

• 双向关系：使用单独的线显示双向关系
• 多条运输路线：显示城市之间不同的交通选择
• 冗余连接：在网络图中显示备用连接
• 多模式通信：显示实体之间不同的通信渠道
• 并行过程：可视化相同阶段之间的并行工作流
• 贸易关系：显示国家之间的进出口流向