ForceDirected

ForceDirected class implements automatic layouts for graphs using a force-directed approach.

To learn more, check out the learn section.

constructor

constructor(options: ForceDirected.Options);

The layout.ForceDirected constructor options parameter has following properties:

charge

[optional] Repulsive force. Bigger the parameter is, bigger the repulsive force.

graph

dia.Graph or dia.Cell[] to apply layout to.

gravityCenter

The point the nodes tend to move to.

height

Height of the layout area.

linkDistance

[optional] Attractive force parameter. Smaller the parameter, bigger the attractive force.

linkStrength

[optional] Attractive force parameter. Bigger the parameter, bigger the attractive force.

width

Width of the layout area.

x

[optional] X coordinate of the top-left corner of the layout area. Default is 0.

y

[optional] Y coordinate of the top-left corner of the layout area. Default is 0.

Methods

start()

forceDirected.start(): void

Initiates the layout process.

step()

Updates the position of shapes for the current step.

Types

Options

Constructor options parameter type

interface Options {
    graph: dia.Graph | dia.Cell[];
    x?: number;
    y?: number;
    width: number;
    height: number;
    gravityCenter: dia.Point;
    charge?: number;
    linkDistance?: number;
    linkStrength?: number;
}