Advanced Force Layout Configuration with Dynamic Weight Control

Functional Overview

This demo provides an advanced force-directed layout interface with real-time control over node weights, line elasticity, and dynamic node addition. It demonstrates how to manipulate force layout parameters interactively and observe their effects on node positioning.

Implementation of Key Features

1. Dynamic Node Weight Assignment

Assign random force_weight values to nodes and update their visual size accordingly:

const nodeWeight = rangeForNode[0] + Math.random() * rangeForNode[1];
const size = 10 + 10 * Math.sqrt(nodeWeight);
graphInstance.updateNode(node, {
    width: size,
    height: size,
    force_weight: nodeWeight,
    text: nodeWeight.toFixed(1)
});

2. Random Line Elasticity

Control line elasticity (spring strength) with random values within a specified range:

const lineElastic = rangeForLine[0] + Math.random() * rangeForLine[1];
graphInstance.updateLine(line, {
    text: lineElastic.toFixed(1),
    force_elastic: lineElastic,
    lineWidth: 0.5 + lineElastic
});

3. Position Reset for Observation

Reset all nodes to an oval formation around the center to observe force layout effects:

const getOvalXy = (c_x, c_y, c_r, c_i, c_n, startAngle = 180) => {
    const deg_i = c_i * (360 / c_n);
    const angle_i = (180 - startAngle + deg_i) * Math.PI / 180;
    return {
        x: c_x + c_r * Math.sin(angle_i),
        y: c_y + c_r * Math.cos(angle_i) * -1
    };
};

4. Dynamic Node Addition

Add new nodes with connections to the currently selected node:

const newNodes = [
    { id: newId + '-1', text: 'New node', x: Math.random() * 40, y: Math.random() * 40 },
    { id: newId + '-2', text: 'New node', x: Math.random() * 40, y: Math.random() * 40 }
];
graphInstance.addNodes(newNodes);
graphInstance.addLines(newLines);

5. Animation Control

Enable/disable node position and canvas animations for performance optimization:

graphInstance.enableNodeXYAnimation(); // Smooth transitions
graphInstance.disableNodeXYAnimation(); // Better performance during layout

Creative Use Cases

Physics Simulation: Model gravitational or electromagnetic forces between objects
Social Network Analysis: Visualize influence or importance through node weight
Cluster Analysis: Adjust forces to reveal natural groupings in data
Network Dynamics: Study how networks evolve with changing node/line properties
Educational Tools: Teach force-directed algorithms with interactive visualizations
Data Exploration: Experiment with parameters to find optimal layouts

Force - Node Weight And Line Traction

Advanced Force Layout Configuration