US Map Graph with Fixed Position Layout

Functional Overview

This demo demonstrates how to overlay a relationship graph on a US map, using fixed positioning to place nodes at geographic locations. It includes snapshot functionality for saving and restoring graph states.

Implementation of Key Features

1. Fixed Layout with Absolute Positioning

Use fixed layout with explicit coordinates:

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'fixed'  // Nodes use x, y coordinates directly
    }
};

const myJsonData: RGJsonData = {
    rootId: 'R',
    nodes: [
        { id: 'R', text: 'R', x: 670, y: 250 },
        { id: 'A', text: 'A', x: 260, y: 160 },
        { id: 'B', text: 'B', x: 530, y: 310 },
        { id: 'C', text: 'C', x: 830, y: 450 },
        { id: 'D', text: 'D', x: 530, y: 450 }
    ]
};

2. Map Background Integration

Add SVG map as background in view slot:

<RelationGraph options={graphOptions}>
    <MapSvg4US />
</RelationGraph>

3. Snapshot Save Functionality

Capture current graph state:

const saveData = () => {
    const allNodesWithPosition = graphInstance.getNodes().map(node => ({
        id: node.id,
        text: node.text,
        x: node.x,
        y: node.y,
        opacity: node.opacity,
        nodeShape: node.nodeShape
    }));

    const allLines = graphInstance.getLinks().map(link => ({
        id: link.line.id,
        from: link.fromNode.id,
        to: link.toNode.id,
        lineShape: link.line.lineShape,
        animation: link.line.animation
    }));

    const graphSnapshotData: RGJsonData = {
        rootId: graphInstance.getOptions().checkedNodeId || 'R',
        nodes: allNodesWithPosition,
        lines: allLines
    };

    setGraphSnapshots([{
        name: new Date().toLocaleTimeString(),
        data: graphSnapshotData
    }, ...graphSnapshots]);
};

4. Snapshot Restoration

Restore graph from saved snapshot:

const redrawSnapshot = (theSnapshot: { data: RGJsonData }) => {
    graphInstance.clearGraph();
    graphInstance.addNodes(theSnapshot.data.nodes);
    graphInstance.addLines(theSnapshot.data.lines);
};

5. Different Line Shapes on Map

Use various line shapes for visual interest:

lines: [
    { id: 'l1', from: 'R', to: 'A', lineShape: RGLineShape.Curve3 },
    { id: 'l2', from: 'R', to: 'B' },
    { id: 'l3', from: 'R', to: 'C' },
    { id: 'l4', from: 'R', to: 'D', lineShape: RGLineShape.StandardStraight }
]

Creative Use Cases

Geographic Networks: Visualize transportation or communication networks
Regional Analysis: Show relationships between geographic entities
Logistics Planning: Display supply chain routes on maps
Infrastructure Mapping: Overlay utility networks on geographic maps
Sales Territories: Visualize regional sales connections
Emergency Response: Show resource deployment locations