HTMLGraph | Layouts | Force-Directed

Force-Directed Layout

A force-directed layout is utilized by default whenever the enableLayout method is invoked on a CanvasBuilder instance. This type of layout also comes with an animated version.

You can also explicitly specify it through its type.

    
const element = document.getElementById(&#34;canvas&#34;);

const canvas = new CanvasBuilder(element)
  .enableLayout({
    algorithm: {
      type: &#34;forceDirected&#34;,
    },
  })
  .build();

The force-directed layout supports optional configuration parameters.

    
const canvas = new CanvasBuilder(element)
  .enableLayout({
    algorithm: {
      type: &#34;forceDirected&#34;,
      dtSec: 0.01,
      nodeCharge: 10000,
      nodeMass: 1,
      nodeForceCoefficient: 1,
      maxForce: 10000000,
      edgeEquilibriumLength: 300,
      edgeStiffness: 1000,
      maxIterations: 1000,
      convergenceVelocity: 10,
      barnesHut: {
        theta: 1,
        areaRadiusThreshold: 0.01,
      },
      seed: &#34;HTMLGraph is awesome&#34;,
    },
  })
  .build();

Name	Type	Description	Required	Default
`dtSec`	`number`	Time step duration in seconds per iteration	No	`0.01`
`nodeCharge`	`number`	Represents electrostatic-like repulsive forces between nodes. Higher values increase repulsion	No	`10000`
`nodeMass`	`number`	Determines node’s inertia during movement. Larger masses slow down convergence but enhance stability	No	`1`
`nodeForceCoefficient`	`number`	Multiplier for the repulsive force between nodes. A higher value increases the repulsion effect given the same node charges.	No	`1`
`maxForce`	`number`	Sets the maximum amount of force applicable to a node. Useful when nodes are very close together, preventing repulsive forces from becoming infinitely large.	No	`10000000`
`edgeEquilibriumLength`	`number`	Perfect edge length when attractive and repulsive forces are absent	No	`300`
`edgeStiffness`	`number`	Measures spring-like behavior of edges. High stiffness enforces equilibrium lengths strictly	No	`1000`
`maxIterations`	`number`	Maximum allowed iterations before stopping the layout process	No	`1000`
`convergenceVelocity`	`number`	Threshold determining whether nodes have stabilized sufficiently based on their movement speed (measured as absolute content distance per second) being less than this value during an iteration	No	`10`
`barnesHut`	`BarnesHutConfig`	Configuration settings for approximating node forces calculations.	No	`{}`
`seed`	`string`	A randomization seed used to initialize nodes’ starting positions if they lack predefined coordinates	No	`"HTMLGraph is awesome"`

Barnes-Hut approximation configuration

Name	Type	Description	Required	Default
`theta`	`number`	Controls the trade-off between optimization and accuracy. Higher values lead to greater optimization but reduced accuracy. With `theta=0`, the algorithm’s complexity is `O(n²)`; with `theta=1`, the complexity becomes `O(n*log(n))`.	no	`1`
`areaRadiusThreshold`	`number`	Specifies the radius of the mesh squares where further subdivision stops. Smaller values produce a finer mesh.	no	`0.01`