3D Icon Button Nodes with Force-Directed Layout

This example demonstrates how to create visually striking 3D-style icon button nodes using pure CSS styling within relation-graph. The graph uses a force-directed layout to position nodes, with each node rendered as a circular icon button featuring a layered 3D effect with hover states. The implementation showcases how RGSlotOnNode can be used to create completely custom node appearances that go far beyond simple rectangles or circles.

Key features include: custom CSS 3D button styling with layered span elements, force-directed layout configuration with transparent nodes, icon data integration using node.data property, and RGSlotOnNode integration for complete node customization. The example demonstrates creating application launchers, service status indicators, control panels, and game interfaces with visual feedback.

3D Icon Button Nodes with Force-Directed Layout

Functional Overview

This example demonstrates how to create visually striking 3D-style icon button nodes using pure CSS styling within relation-graph. The graph uses a force-directed layout to position nodes, with each node rendered as a circular icon button featuring a layered 3D effect with hover states. The implementation showcases how RGSlotOnNode can be used to create completely custom node appearances that go far beyond simple rectangles or circles.

Implementation of Key Features

Custom CSS 3D Button Styling

The node customization is achieved through a dedicated CustomNodeComponent that renders a 3D-style button:

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>
    );
};

The 3D effect is created through CSS layering with multiple span elements providing depth, shadow, and hover animations.

Force-Directed Layout Configuration

The graph uses force-directed layout for automatic node positioning:

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
    }
};

Key configurations include:

• Transparent nodes: Custom styling overrides default node appearance
• Yellow background: Creates contrast with white lines and icons
• Force layout: maxLayoutTimes: 80000 allows longer simulation for better positioning
• Straight lines: StandardStraight for direct connections

Icon Data Integration

Each node includes custom icon data in its data property:

nodes: [
    { id: 'a', text: 'a', data: { icon: 'football' } },
    { id: 'b', text: 'b', data: { icon: 'fries' } },
    { id: 'b1', text: 'b1', data: { icon: 'delivery_truck' } },
    // ... more nodes with icons
]

The icon name is accessed via node.data?.icon in the slot component and passed to the CircumIcon component for rendering.

RGSlotOnNode Integration

The custom component is integrated through the slot:

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

The slot provides checked and dragging states that can be used for conditional styling, though this example focuses on the visual 3D effect.

Creative Use Cases

Interactive Dashboard Nodes

The 3D button style is ideal for:

• Application launchers: Visual icons that users can click to open features
• Service status indicators: Animated 3D buttons showing system health
• Control panels: Interactive buttons for equipment or process control
• Game interfaces: Skill trees or ability selectors with visual feedback

Brand Customization

CSS-based node styling enables:

• Corporate identity: Match company branding with custom colors and effects
• Theme variations: Switch between different visual styles with CSS classes
• Accessibility: High contrast designs for better visibility
• Animation effects: Smooth transitions on hover, selection, or drag

Visual Category Systems

Icon-based node organization supports:

• File type browsers: Different icons for document types
• Service catalogs: Visual representation of available services
• Product catalogs: E-commerce category navigation
• Menu systems: Restaurant menus, program schedules, or content directories