yFiles for HTML Demos Basic Features Tutorial 11 Layout Data yFiles Demos

Layout Data

How to consider graph data in automatic layout

This step shows how to configure a layout algorithm using the information stored in the first label of each node.

In this demo, the preferred alignment for each node within its layer (top, center or bottom) is defined by its label. We use this value to configure the layout algorithm.

Select a different alignment for a node by changing its label text to Top, Center or Bottom. The layout is updated automatically after editing a label.
Create new nodes and run a new layout. Newly created nodes will be center-aligned, unless otherwise specified by the user.

Note	Nodes with label text other than 'Top', 'Center' or 'Bottom' will be center-aligned.

We create a LayoutData instance that defines how each node should be aligned.

// Configure the layout data using the information from the node labels
const hierarchicLayoutData = new HierarchicLayoutData({
  nodeLayoutDescriptors: (
    node: INode
  ): HierarchicLayoutNodeLayoutDescriptor =>
    new HierarchicLayoutNodeLayoutDescriptor({
      // Set the alignment of the node based on the label
      layerAlignment: getAlignment(node)
    })
})

The layer alignment can take values between 0 and 1, where 0 corresponds to top alignment, 0.5 to center alignment and 1.0 to bottom alignment.

function getAlignment(node: INode): number {
  const text = node.labels.at(0)?.text?.toLowerCase() ?? 'center'
  switch (text) {
    default:
    case 'center':
      return 0.5
    case 'top':
      return 0.0
    case 'bottom':
      return 1.0
  }
}

The layout data is used as a parameter for morphLayout to pass the information to the layout algorithm.

await graphComponent.morphLayout({
  layout: new MinimumNodeSizeStage(hierarchicLayout),
  layoutData: hierarchicLayoutData,
  morphDuration: '1s',
  easedAnimation: true
})

12 Analysis Algorithms