内置虚线与动画参考

这个示例构建了什么

本示例渲染了一个从左到右的小型树，用作 relation-graph 内置连线效果的对比面板。一条分支展示四种 dashType 预设加上一条普通连线，另一条分支则在默认曲线渲染器上展示四种 animation 预设。画面还包含纯图标圆形节点、绿色渐变画布，以及一个可拖拽、可最小化、可切换为设置面板并可用于导出图片的悬浮辅助窗口。

数据是如何组织的

图数据在 initializeGraph() 中以内联方式声明为一个 RGJsonData 对象，包含 rootId、nodes 和 lines。每个节点使用简单的 { id, text, data: { icon } } 结构，每条连线使用 from、to、text，以及可选的 dashType 或 animation 字段。在调用 setJsonData() 之前没有任何预处理：示例将这份静态数据集直接传给 relation-graph，因此同样的模式也可以替换为工作流流转、路由状态、服务依赖或其他边状态数据。

relation-graph 的使用方式

RGProvider 包裹整个示例，RGHooks.useGraphInstance() 负责驱动所有图谱生命周期工作。本地 graphOptions 让 relation-graph 保持默认渲染路径，同时对展示效果进行调优：树形布局从左侧生长，节点间距被加大以提升可读性，连线使用 RGLineShape.StandardCurve，标签通过 defaultLineTextOnPath 沿路径显示，内置工具栏则以横向方式放置在右下角。

本示例通过 RGSlotOnNode 自定义节点，而不是使用自定义连线渲染器。node.data.icon 被映射到 Lucide 图标，使树的各个分支在视觉上保持区分，同时让连线样式本身继续作为核心演示内容。共享的 DraggableWindow 辅助组件使用 RGHooks.useGraphStore() 和 graphInstance.setOptions() 在运行时切换滚轮与拖拽行为，并通过 prepareForImageGeneration() 与 restoreAfterImageGeneration() 将当前画布导出为图片。

样式保持在本地且足够轻量。SCSS 文件添加了绿色渐变背景，让工具栏呈现半透明效果，将圆形节点中的内容居中，并通过把 checkedItemBackgroundColor 用作图标徽标背景来覆盖选中节点的外观。本示例中没有编辑工具、自定义连线插槽或运行时连线变更。

关键交互

图谱在挂载时只加载一次，随后调用 moveToCenter() 和 zoomToFit()，让所有内置连线变体在初始状态下就完整可见。
用户可以并排查看虚线、普通线和动画连线；这些变体是在初始数据中预先定义的，而不是通过动态切换生成。
悬浮辅助窗口可以被拖拽、最小化，并可切换到设置模式。
设置面板可以在运行时修改滚轮与拖拽行为，并能将当前图谱视图导出为图片。

关键代码片段

下面这个选项块说明该示例保持使用 relation-graph 的默认渲染器，并通过布局与选项调优来构建一个清晰的对比展示面。

const graphOptions: RGOptions = {
    defaultLineColor: 'rgba(255, 255, 255, 0.6)',
    defaultNodeColor: 'transparent',
    defaultNodeBorderWidth: 0,
    defaultNodeShape: RGNodeShape.circle,
    toolBarDirection: 'h',
    toolBarPositionH: 'right',
    toolBarPositionV: 'bottom',
    defaultLineShape: RGLineShape.StandardCurve,
    defaultJunctionPoint: RGJunctionPoint.lr,
    defaultLineTextOnPath: true,
    layout: {
        layoutName: 'tree',
        from: 'left',
        treeNodeGapH: 310,
        treeNodeGapV: 70
    }
};

这段内联连线数据是核心证据，说明视觉差异来自内置的逐线数据字段，而不是 CSS 类或加载后的连线更新。

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' },
    { 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 }
]

这个节点插槽让边保持使用默认渲染器，同时把每个节点变成一个由 node.data.icon 选择的图标徽标。

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => {
        const iconName = node.data?.icon || 'default';
        const IconComponent = IconMapper[iconName] || CircleDot;
        return (
            <div className="my-icon-node h-20 w-20 text-white rounded flex place-items-center justify-center hover:bg-white hover:bg-opacity-40">
                <IconComponent size={40} />
            </div>
        );
    }}
</RGSlotOnNode>

这个共享辅助面板负责把运行时画布控制和图片导出功能连接到图实例。

const { options } = RGHooks.useGraphStore();
const dragMode = options.dragEventAction;
const wheelMode = options.wheelEventAction;

<SettingRow
    label="Wheel Event:"
    options={[
        { label: 'Scroll', value: 'scroll' },
        { label: 'Zoom', value: 'zoom' },
        { label: 'None', value: 'none' }
    ]}
    value={wheelMode}
    onChange={(newValue: string) => {
        graphInstance.setOptions({ wheelEventAction: newValue });
    }}
/>

这个示例的独特之处

从对比数据来看，这个示例与 line-style2、custom-line-style 和 custom-line-animation 最为接近，但它的定位比这些相邻示例更窄也更简单。相较于 line-style2，它不依赖 checked-line 状态或 CSS 包装类，而是在初始数据集中一次性展示所有内置变体。相较于 custom-line-style，它避免使用 className、基于 SCSS 的连线皮肤以及 updateLine() 调用。相较于 custom-line-animation，它停留在 relation-graph 内置的 animation 值上，而不是额外加入 SVG 过滤器或更丰富的自定义效果。

因此，当需求是“默认渲染器是否已经足够用？”时，这个示例就是一个很好的起点。经过验证的稀有度数据也表明，它将从左到右的树形布局、纯图标圆形节点插槽、路径标签，以及并排展示的内置 dashType 与 animation 预设组合在一起，这种功能组合在示例集中并不常见。

这一模式还适用于哪些地方

面向状态的依赖关系图，其中虚线表示延迟或间接关系，动画连线表示活跃流量。
物流或运营视图，其中图标节点用于标识实体类型，边的运动效果则可在不引入自定义 SVG 的前提下突出实时路径。
工作流、审批流或流水线图，在投入更重的主题定制之前，先用紧凑的内置图例表达边状态。
内部设计系统或入门演示，用于向团队说明仅通过 relation-graph 原生数据属性就能表达哪些连线语义。

内置线条虚线与动画