JointJS+ ForceDirected

ForceDirected plugin implements automatic layouts for graphs using a force-directed approach. This is useful for, usually larger, undirected graphs.

Installation

Include the joint.layout.forceDirected.js file into your HTML:

<script src="joint.layout.forceDirected.js"></script>

Usage

ForceDirected layout plugin auto-layouts graphs based on three forces: repulsive force (forces nodes to move out of each other), attractive force (tries to get nodes together like a spring) and a gravity force (tendency of the nodes to move to a certain point).

The ForceDirected constructor accepts a couple of parameters for configuring the layout. The gravityCenter parameter is the point the nodes tend to move to. This is usually set to the center of the area where the nodes are to be laid out. charge parameter affects the repulsive force. Bigger the parameter is, bigger the repulsive force. linkDistance and linkStrength both affect the attractive force (you can think of it as parameters of a spring that tights together two nodes). Bigger the linkStrength, bigger the attractive force between two connected nodes. On the other hand, smaller the linkDistance, shorter links you allow and so the attractive force is bigger between two connected nodes.

There is no one-fits-all set of parameters that would give great result for all possible graphs. Therefore, it is suggested that you to play with the parameters, try to set different values so that it gives a good result for your use case.

var graphLayout = new joint.layout.ForceDirected({
    graph: graph // or array of selected cells
    x: 0,
    y: 0,
    width: 600,
    height: 400,
    gravityCenter: { x: 300, y: 200 },
    charge: 180,
    linkDistance: 30
});

graphLayout.start();

Array.from({ length: 100 }).forEach(function() { graphLayout.step(); });

Note: It is recommended to use the requestAnimationFrame for stepping the layout.