Minimal Node Style

Demonstrates a clean, minimalist approach to node styling using only CSS without custom node slots in a tree layout.

Minimal Node Style

Functional Overview

This example demonstrates a clean, minimalist approach to node styling using only CSS without custom node slots. The tree layout is configured with transparent nodes and custom spacing for a simplified visual presentation.

Implementation of Key Features

Minimal Configuration

const graphOptions: RGOptions = {
    backgroundColor: '#ffffff',
    defaultLineColor: '#444',
    defaultNodeColor: 'transparent',
    defaultNodeBorderWidth: 0,
    defaultNodeBorderColor: 'transparent',
    defaultNodeShape: RGNodeShape.rect,
    defaultLineShape: RGLineShape.StandardCurve,
    defaultJunctionPoint: RGJunctionPoint.lr,
    toolBarDirection: 'h',
    toolBarPositionH: 'right',
    toolBarPositionV: 'bottom',
    layout: {
        layoutName: 'tree',
        from: 'left',
        treeNodeGapH: 310,
        treeNodeGapV: 70
    }
};

Data-Only Approach

const myJsonData: RGJsonData = {
    rootId: 'a',
    nodes: [
        { id: 'a', text: 'a' },
        { id: 'b', text: 'b' },
        { id: 'b1', text: 'b1' }
    ],
    lines: [
        { from: 'a', to: 'b', text: '' },
        { from: 'b', to: 'b1', text: '' }
    ]
};

No custom slots needed - the graph uses default node rendering with CSS styling.

Creative Use Cases

Data Structure Visualization: Display hierarchical data structures with minimal visual noise. Focus on relationships rather than elaborate node designs.

File System Trees: Show directory structures as clean trees. Nodes are simple text labels with connecting lines showing hierarchy.

Dependency Graphs: Visualize package or module dependencies with a clean, technical aesthetic. Transparent nodes put focus on the connections.

Organization Charts: Simple organizational hierarchy with names only. Eliminate visual clutter for large organizations.

Taxonomy Displays: Show classification hierarchies clearly. Minimal design helps users navigate complex taxonomies.

Process Outlines: High-level process flow with step names only. Useful for presentations and documentation.

Menu Structures: Visualize website or application menu hierarchies. Clean presentation aids navigation design.