内置线条样式和动画

使用 dashType 和 animation 属性的内置线条虚线图案和动画展示。

内置线条样式和动画

功能概述

此示例展示了 relation-graph 的内置线条虚线图案和动画。它提供了使用 dashType 和 animation 属性创建视觉上不同的连接样式的快速参考。

核心特性实现

1. 虚线类型配置

为线条使用不同的虚线图案：

lines: [
    { id: 'line-1', from: 'a', to: 'b', text: 'dataType=1', dashType: 1 },
    { id: 'line-2', from: 'b', to: 'b1', text: 'dataType=2', dashType: 2 },
    { id: 'line-3', from: 'b', to: 'b2', text: 'dataType=3', dashType: 3 },
    { id: 'line-4', from: 'b2', to: 'b2-1', text: 'dataType=4', dashType: 4 },
    { id: 'line-5', from: 'b2', to: 'b2-2', text: 'Normal' }  // 无 dashType
]

2. 动画效果

将内置动画应用于线条：

lines: [
    { id: 'line-6', from: 'a', to: 'c', text: 'animation=1', animation: 1 },
    { id: 'line-7', from: 'c', to: 'c1', text: 'animation=2', animation: 2 },
    { id: 'line-8', from: 'c', to: 'c2', text: 'animation=3', animation: 3 },
    { id: 'line-9', from: 'c', to: 'c3', text: 'animation=4', animation: 4 }
]

3. 树形布局配置

配置水平树形布局以进行层次显示：

layout: {
    layoutName: 'tree',
    from: 'left',
    treeNodeGapH: 310,
    treeNodeGapV: 70
}

4. 路径文本

启用文本跟随曲线：

defaultLineTextOnPath: true

5. 基于图标的节点渲染

在节点槽中使用图标：

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => {
        const iconName = node.data?.icon || 'default';
        const IconComponent = IconMapper[iconName] || CircleDot;
        return (
            <div className="my-icon-node">
                <IconComponent size={40} />
            </div>
        );
    }}
</RGSlotOnNode>

创意使用场景

• 状态指示：使用虚线表示暂定/建议的连接
• 数据流可视化：动画线条以显示方向和活动
• 网络流量：使用动画显示活动与非活动连接
• 流程状态：为不同的流程状态使用不同的线条样式
• 安全级别：使用线条样式指示安全分类
• 时间关系：为基于时间的关系使用动画线条