3D 图标按钮节点与力导向布局

本示例展示了如何在 relation-graph 中使用纯 CSS 样式创建具有视觉冲击力的 3D 风格图标按钮节点。图谱使用力导向布局来自动定位节点，每个节点渲染为具有分层 3D 效果和悬停状态的圆形图标按钮。该实现展示了 RGSlotOnNode 如何用于创建完全自定义的节点外观，远远超越简单的矩形或圆形节点。

关键特性包括：使用分层 span 元素的自定义 CSS 3D 按钮样式、具有透明节点的力导向布局配置、使用 node.data 属性的图标数据集成，以及用于完全节点自定义的 RGSlotOnNode 集成。该示例演示了创建应用程序启动器、服务状态指示器、控制面板和具有视觉反馈的游戏界面。

3D 图标按钮节点与力导向布局

功能概述

核心特性实现

自定义 CSS 3D 按钮样式

节点自定义通过专用的 CustomNodeComponent 实现，渲染 3D 风格的按钮：

const CustomNodeComponent: React.FC<RGNodeSlotProps> = ({ node }) => {
    return (
        <div>
            <button className={`icon-btn icon-btn--${node.data?.icon}`} type="button">
                <span className="icon-btn__back"></span>
                <span className="icon-btn__front">
                    <CircumIcon color="#ffffff" size="30px" name={node.data?.icon} />
                </span>
                <span className="icon-btn__label">{node.text}</span>
            </button>
        </div>
    );
};

3D 效果通过 CSS 分层实现，使用多个 span 元素提供深度、阴影和悬停动画。

力导向布局配置

图谱使用力导向布局进行自动节点定位：

const graphOptions: RGOptions = {
    debug: true,
    defaultLineColor: 'rgba(255, 255, 255, 0.6)',
    defaultNodeColor: 'transparent',
    defaultNodeShape: RGNodeShape.rect,
    backgroundColor: '#d2a904',
    toolBarDirection: 'h',
    toolBarPositionH: 'right',
    toolBarPositionV: 'bottom',
    defaultLineShape: RGLineShape.StandardStraight,
    layout: {
        layoutName: 'force',
        maxLayoutTimes: 80000
    }
};

关键配置包括：

透明节点：自定义样式覆盖默认节点外观
黄色背景：与白色线条和图标形成对比
力导向布局：maxLayoutTimes: 80000 允许更长的模拟时间以获得更好的定位
直线连接：StandardStraight 用于直接连接

图标数据集成

每个节点的 data 属性中包含自定义图标数据：

nodes: [
    { id: 'a', text: 'a', data: { icon: 'football' } },
    { id: 'b', text: 'b', data: { icon: 'fries' } },
    { id: 'b1', text: 'b1', data: { icon: 'delivery_truck' } },
    // ... 更多带有图标的节点
]

图标名称通过 slot 组件中的 node.data?.icon 访问，并传递给 CircumIcon 组件进行渲染。

RGSlotOnNode 集成

自定义组件通过 slot 集成：

<RelationGraph options={graphOptions} onNodeClick={onNodeClick} onLineClick={onLineClick}>
    <RGSlotOnNode>
        {({ node, checked, dragging }: RGNodeSlotProps) => (
            <CustomNodeComponent node={node} checked={checked} dragging={dragging} />
        )}
    </RGSlotOnNode>
</RelationGraph>

slot 提供 checked 和 dragging 状态，可用于条件样式，虽然此示例专注于视觉 3D 效果。

创意使用场景

交互式仪表板节点

3D 按钮样式适用于：

应用程序启动器：用户可以点击打开功能的视觉图标
服务状态指示器：显示系统健康状况的动画 3D 按钮
控制面板：设备或工艺控制的交互按钮
游戏界面：具有视觉反馈的技能树或能力选择器

品牌定制

基于 CSS 的节点样式支持：

企业形象：使用自定义颜色和效果匹配公司品牌
主题变体：通过 CSS 类在不同视觉风格之间切换
无障碍性：高对比度设计以提高可见性
动画效果：悬停、选择或拖动时的平滑过渡

视觉分类系统

基于图标的节点组织支持：

文件类型浏览器：不同文档类型的图标
服务目录：可用服务的视觉表示
产品目录：电商分类导航
菜单系统：餐厅菜单、节目时间表或内容目录

节点-内容及样式3

3D 图标按钮节点与力导向布局

3D 图标按钮节点与力导向布局

功能概述

核心特性实现

自定义 CSS 3D 按钮样式

力导向布局配置

图标数据集成

RGSlotOnNode 集成

创意使用场景

交互式仪表板节点

品牌定制

视觉分类系统