Advanced Line Styling with Shortest Path Highlighting

Functional Overview

This demo demonstrates advanced line styling techniques including shortest path calculation, custom arrow markers, and dynamic visual effects. It automatically highlights paths between nodes to showcase relationship analysis capabilities.

Implementation of Key Features

1. Custom Arrow Markers

Define custom SVG markers for line endpoints:

// MySvgDefs.tsx
<defs>
    <marker id="my-arrow-001" markerWidth="10" markerHeight="10" refX="5" refY="5">
        <path d="M0,0 L10,5 L0,10" fill="#00ced1" />
    </marker>
</defs>

// Usage
{
    id: 'line-18',
    from: 'c',
    to: 'm1',
    endMarkerId: 'my-arrow-001',
    startMarkerId: 'my-arrow-001-start',
    showStartArrow: true
}

2. Shortest Path Calculation

Implement shortest path algorithm using utility functions:

const calcShortestPath = (fromId: string, toId: string, graphInstance, className) => {
    // Calculate shortest path using Dijkstra or BFS
    const path = findShortestPath(fromId, toId);

    // Highlight path lines
    path.forEach(lineId => {
        const line = graphInstance.getLines().find(l => l.id === lineId);
        if (line) {
            graphInstance.updateLine(line, { className });
        }
    });

    // Highlight path nodes
    path.forEach(lineId => {
        const line = graphInstance.getLines().find(l => l.id === lineId);
        graphInstance.updateNode(line.from, { className: 'my-node-on-path' });
        graphInstance.updateNode(line.to, { className: 'my-node-on-path' });
    });
};

3. Two-Click Node Selection

Implement state tracking for two-click path selection:

const checkedNodeIdRef = useRef('');

const onNodeClick = (node: RGNode) => {
    if (checkedNodeIdRef.current) {
        if (checkedNodeIdRef.current === node.id) return;
        calcShortestPath(checkedNodeIdRef.current, node.id, graphInstance, itemsOnPathClassName);
        checkedNodeIdRef.current = '';
    } else {
        checkedNodeIdRef.current = node.id;
    }
};

4. Visual Effects on Path Lines

Apply CSS animations to highlighted paths:

.my-line-class-10 {
    stroke: #00ff00;
    animation: pulse-current 1s infinite;
}

.my-line-class-12 {
    stroke: #0099ff;
    animation: flow-data 2s infinite linear;
}

5. Automatic Path Demonstration

Automatically demonstrate path finding with random nodes:

const restartRandomPathTask = () => {
    clearInterval(playTimerRef.current);
    playTimerRef.current = setInterval(() => {
        const nodes = graphInstance.getNodes();
        const randomNode = nodes[Math.floor(Math.random() * nodes.length)];
        onNodeClick(randomNode);
    }, 800);
};

Creative Use Cases

Route Planning: Visualize optimal routes in transportation networks
Network Analysis: Identify critical paths in infrastructure
Social Network Analysis: Find shortest connection paths between people
Supply Chain Optimization: Highlight efficient delivery routes
Knowledge Graphs: Show conceptual relationships and paths
Circuit Design: Visualize signal paths in electronic circuits

Custom Line Style Pro

Advanced Line Styling with Shortest Path