HTMLGraph
Star

Hierarchical Layout

Configure hierarchical layout by setting type: "hierarchical" in the enableLayout method of a CanvasBuilder instance.

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

const canvas = new CanvasBuilder(element)
  .enableLayout({
    algorithm: {
      type: "hierarchical",
    },
  })
  .build();

  
Hierarchical layout supports optional configuration parameters:
    
const canvas = new CanvasBuilder(element)
  .enableLayout({
    algorithm: {
      type: "hierarchical",
      layerWidth: 300,
      layerSpace: 300,
      transform: { mirror: Math.PI / 2 },
    },
  })
  .build();

  
NameTypeDescriptionRequiredDefault
layerWidthnumberWidth of a single layerNo300
layerSpacenumberMinimum space between nodes within a single layerNo300
transformTransformation | Transformation[]Single transformation or array of transformationsNoundefined
Transformation Configuration
The transform parameter can be either a single transformation or an array of sequential transformations.
In general, a transformation is represented by a function that modifies the coordinates of a node.
    
const canvas = new CanvasBuilder(element)
  .enableLayout({
    algorithm: {
      type: "hierarchical",
      transform: (point) => {
        return { x: point.x, y: point.y };
      },
    },
  })
  .build();

  
Additionally, there are several built-in implementations of these functions for common scenarios to simplify setup.
  1. Shift
    
const canvas = new CanvasBuilder(element)
  .enableLayout({
    algorithm: {
      type: "hierarchical",
      transform: {
        shift: { x: 100, y: 200 },
      },
    },
  })
  .build();

  
  1. Scale
    
const canvas = new CanvasBuilder(element)
  .enableLayout({
    algorithm: {
      type: "hierarchical",
      transform: {
        scale: 2,
        origin: { x: 0, y: 0 },
      },
    },
  })
  .build();

  
The origin parameter is optional.
  1. Rotate
    
const canvas = new CanvasBuilder(element)
  .enableLayout({
    algorithm: {
      type: "hierarchical",
      transform: {
        rotate: Math.PI / 2,
        origin: { x: 0, y: 0 },
      },
    },
  })
  .build();

  
The origin parameter is optional.
  1. Mirror
    
const canvas = new CanvasBuilder(element)
  .enableLayout({
    algorithm: {
      type: "hierarchical",
      transform: {
        mirror: Math.PI / 2,
        origin: { x: 0, y: 0 },
      },
    },
  })
  .build();

  
The mirror parameter specifies the angle of the mirror axis. The origin parameter is optional.
  1. Matrix
    
const canvas = new CanvasBuilder(element)
  .enableLayout({
    algorithm: {
      type: "hierarchical",
      transform: {
        a: 1,
        b: 0,
        c: 10,
        d: 0,
        e: 1,
        f: 20,
      },
    },
  })
  .build();

  
This is how transformation works on a point with (x, y) coordinates.

    
        (
            
              
                
                  
                    x
                    1
                  
                
              
              
                
                  
                    y
                    1
                  
                
              
              
                1
              
            
        )
        =
        (
            
                
                  a
                  b
                  c
                
                
                  d
                  e
                  f
                
                
                  0
                  0
                  1
                
            
        )
        *
        (
            
                x
                y
                1
            
        )