HTMLGraph logo HTMLGraph
Star

Animated Layouts

Iterative layout algorithms allow visualizing intermediate results while calculations are ongoing. Users can observe the evolving graph layout in real-time without having to wait until all nodes have reached their final positions.

To enable animated nodes positioning, call the enableAnimatedLayout method on CanvasBuilder.

    
const element = document.getElementById('canvas');

const canvas = new CanvasBuilder(element)
  .enableAnimatedLayout()
  .build();

As shown below, coordinates are calculated automatically and do not need to be specified explicitly when calling the addNode method.

    
const element = document.createElement('div');

canvas.addNode({
  id: "node-1",
  element: element,
  ports: [
    { id: "node-1", element: element }
  ],
});

The enableAnimatedLayout method accepts optional configuration parameters:

    
const element = document.getElementById('canvas');

const canvas = new CanvasBuilder(element)
  .enableAnimatedLayout({
    algorithm: {
      type: "forceDirected",
      nodeCharge: 10000,
      nodeMass: 1,
      effectiveDistance: 1000,
      edgeEquilibriumLength: 300,
      edgeStiffness: 100,
      maxTimeDeltaSec: 0.1,
      convergenceDelta: 0.001,
      seed: "HTMLGraph is awesome",
    },
  })
  .build();

Configuration Parameters

NameTypeDescriptionRequiredDefault
algorithmAlgorithmConfigSpecifies the layout algorithm to applyno{ type: "forceDirected" }

AlgorithmConfig Options

AlgorithmConfigurationExample
ForceDirectedForceDirected{ type: "forceDirected" }
CustomCustom{ type: "custom", instance: new MyAlgorithm() }