Custom Force Layout with Node Clustering

Demonstrates a custom force-directed layout algorithm that implements node clustering based on color attributes with real-time physics parameter adjustments.

Custom Force Layout with Node Clustering

Functional Overview

This example demonstrates a custom force-directed layout algorithm that implements node clustering based on color. Unlike standard force layouts which only handle node repulsion and line elasticity, this custom layout adds attraction forces between nodes of the same color, enabling automatic grouping by attributes.

Implementation of Key Features

Custom Force Layout Class

The MyForceLayout class extends the base layout functionality to add color-based attraction:

• Node Repulsion: Controls how strongly nodes push away from each other
• Line Elasticity: Controls the spring force between connected nodes
• Color Attraction: Custom logic that pulls same-colored nodes together

const myLayout = new MyForceLayout({
    maxLayoutTimes: Number.MAX_SAFE_INTEGER,
    force_node_repulsion,
    force_line_elastic
}, graphInstance.getOptions(), graphInstance);
graphInstance.setLayoutor(myLayout, true, true);

Dynamic Layout Parameter Updates

The example provides real-time sliders to adjust physics parameters:

• Node Repulsion Coefficient (0.01 - 1.2): Higher values increase separation force but may cause shaking
• Line Elastic Coefficient (0.01 - 1.2): Higher values strengthen connections but may cause instability

const updateLayoutOptions = async () => {
    graphInstance.stopAutoLayout();
    const forceLayout = graphInstance.layoutor as MyForceLayout;
    if (forceLayout) {
        forceLayout.updateOptions({
            force_node_repulsion,
            force_line_elastic
        });
        forceLayout.start();
    }
    graphInstance.startAutoLayout();
};

Random Color Assignment and Re-clustering

A button triggers random color reassignment and observes the layout reorganize:

const resetNodeColor = async () => {
    graphInstance.getNodes().forEach(node => {
        const newColor = ['red', 'yellow', 'blue'][Math.floor(Math.random() * 3)];
        graphInstance.updateNode(node, { color: newColor });
    });
    await graphInstance.sleep(600);
    await updateLayoutOptions();
};

Initial Node Positioning

Nodes are initially positioned randomly before the force layout begins:

data.nodes.forEach(node => {
    node.x = Math.random() * 300;
    node.y = Math.random() * 300;
    node.color = ['red', 'yellow', 'blue'][Math.floor(Math.random() * 3)];
});

Layout Lifecycle Management

The component properly starts and stops the auto-layout animation:

useEffect(() => {
    initializeGraph();
    return () => {
        graphInstance.stopAutoLayout();
    };
}, []);

Creative Use Cases

• Data Clustering Visualization: Automatically group items by category, status, or any attribute
• Social Network Analysis: Show community detection with visual clustering
• Market Segmentation: Display customer segments grouped by behavior or demographics
• Knowledge Graphs: Cluster related concepts together for better understanding
• Biological Networks: Group proteins or genes by functional similarity