Relation Graph

Functional Overview

This example demonstrates the layout rotation feature, which allows rotating the entire graph layout by a specified angle. Through slider control, users can rotate the graph 0-360 degrees in real-time. This feature is supported by all built-in layouts and is particularly useful for adjusting the orientation of the graph for better visual presentation or to fit specific display requirements.

Implementation of Key Features

Layout Rotation Configuration

The core functionality is setting the rotation angle in the layout configuration:

const reLayout = async () => {
    graphInstance.updateOptions({
        layout: {
            layoutName: layoutName,
            rotate: layoutRotate
        }
    });
    await graphInstance.doLayout();
};

The rotate parameter accepts angle values from 0-360 degrees, with positive values for clockwise rotation and negative values for counter-clockwise rotation.

Responsive State Updates

Using React’s useEffect to listen for rotation angle changes and automatically re-layout:

useEffect(() => {
    reLayout();
}, [layoutRotate]);

This ensures that whenever the layoutRotate state changes, the graph automatically recalculates the layout.

Multiple Layout Support

The demo showcases the rotation feature working with different layout types:

<SimpleUISelect
    data={[{ value: 'center', text: 'Center' }, { value: 'tree', text: 'Tree' }]}
    currentValue={layoutName}
    onChange={(newValue: string) => { setLayoutName(newValue); }}
/>

Both center and tree layouts support rotation, demonstrating the versatility of this feature.

Incremental Rotation Control

Buttons are provided for small angle adjustments:

const addAngle = async (buff: number) => {
    setLayoutRotate(prev => prev + buff);
};

<SimpleUIButton onClick={() => addAngle(5)}>Rotate 5deg CW</SimpleUIButton>
<SimpleUIButton onClick={() => addAngle(-5)}>Rotate 5deg CCW</SimpleUIButton>

This allows users to make fine-grained angle adjustments.

Slider Control

Using a slider provides intuitive angle control:

<SimpleUISlider
    max={360}
    min={0}
    step={5}
    currentValue={layoutRotate}
    onChange={(newValue: number) => { setLayoutRotate(newValue); }}
/>

The slider range of 0-360 degrees with a step of 5 degrees provides a good balance between precision and usability.

Creative Use Cases

Presentation Orientation Adjustment

Adjust graph orientation when creating presentations or reports to match the slide design. For example, rotating a tree layout to fit landscape or portrait page layouts.

Geographic Direction Alignment

In geographic or map-related visualizations, adjust the graph orientation to match true geographic directions (North, South, East, West), making the visualization more intuitive.

Artistic Effects and Creative Design

Use rotation to create unique artistic effects. For example, rotating a radial layout to a specific angle to create asymmetrical but visually appealing designs.

Multi-Graph Comparison Layout

When displaying multiple graphs side-by-side, use rotation to create contrasting effects. For example, rotating one graph 90 degrees and another 180 degrees to show different perspectives of the data.

Screen Space Adaptation

Adjust graph orientation based on available screen space. In wide-screen devices, horizontal layouts may be more appropriate, while vertical layouts work better on portrait screens.

Data Flow Direction Indication

Rotate the graph to indicate the direction of data flow or process. For example, in flowcharts, rotating the layout to show left-to-right or top-to-bottom flow.

Clock and Periodic Data Visualization

For visualizations representing time or periodic data, use rotation to match clock directions or other periodic reference systems, making the data easier to understand.

Comparative Analysis

Create before/after comparisons by rotating the same graph to different angles, highlighting different aspects of the data structure.

Center Layout Angle Offset

Dynamic Graph Layout Rotation