自定义节点样式与树形布局

演示通过节点插槽使用 div+css 和 React 组件完全自定义节点外观，支持树形布局和多种节点类型。

自定义节点样式与树形布局

功能概述

本示例演示如何通过节点插槽使用 div+css 和 React 组件完全自定义节点外观。它使用树形布局，支持不同类型的节点（根节点、圆形、视频、按钮），并使用自定义组件渲染。

核心特性实现

树形布局配置

const graphOptions: RGOptions = {
    backgroundColor: 'rgb(101, 163, 13)',
    defaultLineColor: 'rgba(255, 255, 255, 0.6)',
    defaultNodeColor: 'transparent',
    defaultNodeBorderWidth: 0,
    defaultNodeShape: RGNodeShape.rect,
    defaultLineShape: RGLineShape.StandardCurve,
    defaultJunctionPoint: RGJunctionPoint.lr,
    layout: {
        layoutName: 'tree',
        from: 'left',
        treeNodeGapH: 200,
        treeNodeGapV: 30
    }
};

基于节点类型的渲染

const myJsonData: RGJsonData = {
    rootId: 'a',
    nodes: [
        { id: 'a', text: 'a', type: 'my-root', nodeShape: RGNodeShape.rect },
        { id: 'b', text: 'b', type: 'my-circle', nodeShape: RGNodeShape.circle },
        { id: 'b1', text: 'b1' },
        { id: 'c', text: 'c', type: 'my-video' },
        { id: 'c1', text: 'c1', type: 'my-button', nodeShape: RGNodeShape.rect, data: { buttonText: 'Button 1' } }
    ]
};

自定义节点内容组件

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => (
        <MyNodeContent node={node} />
    )}
</RGSlotOnView>

MyNodeContent 组件处理渲染不同类型的节点，使用适当的样式和组件。

创意使用场景

组织层次结构：根节点显示公司徽标，部门主管使用圆形头像，员工使用详细卡片，操作节点显示为交互式按钮。

决策树：决策节点显示为带图标的菱形，结果节点使用矩形，叶节点显示为简单文本，操作节点呈现为可点击按钮。

技能树：技能类别使用大型标题节点，技能组显示为圆形图标，单个技能显示为卡片，锁定技能使用不同样式。

产品类别：类别节点使用大型横幅，子类别显示为圆形徽章，产品显示为带图像的详细卡片，促销商品具有特殊的按钮样式。

流程：开始/结束节点使用独特的形状，决策点显示为带图标的菱形，流程步骤使用矩形卡片，操作项呈现为交互式按钮。

文件系统导航：根文件夹使用大型标题样式，子文件夹显示为圆形图标，文件显示为带文件类型指示器的详细卡片，特殊文件夹具有独特的样式。

学习路径：课程模块使用大型标题节点，课程显示为圆形图标，主题显示为卡片，测验呈现为交互式按钮。