Tree Layout

This chapter describes the major API changes to the TreeLayout introduced with yFiles for HTML 3.0 and how to migrate from the older version.

As with all major layout algorithms, the TreeLayout no longer inherits from MultiStageLayout, but instead implements ILayoutAlgorithm directly. The layout stages are now managed by a LayoutStageStack, which can be obtained via the layoutStages property; see the migration chapter Layout Stages and Multi-Stage Layouts for more details.

Renamed, Moved, and Removed Classes and Members

The following table contains the renamed, moved, and removed classes and members of the major classes of the TreeLayout.

Changed Default Values and Behavior Changes

If non-tree graphs are given as input, they are now temporarily reduced to trees by applying the TreeReductionStage before applying the layout algorithm. The non-tree edges are then routed using the router specified via the TreeReductionStage.nonTreeEdgeRouter. The TreeReductionStage that is used by the TreeLayout is available via the property TreeLayout.treeReductionStage.

Node labels are now considered by default. To change this behavior, set the nodeLabelPlacement property to the desired value. It is now also easier to place the node labels with GenericLabeling by setting the value to GENERIC.

Edge labels are now placed using an integrated edge labeling algorithm. To change this behavior, set the edgeLabelPlacement property to the desired value. It is now also easier to place the edge labels with GenericLabeling by setting the value to GENERIC.

The port assignment modes specified via the property TreeLayoutPortAssigner.mode have been reduced. Port candidates are now always considered. It is no longer necessary to set it to PORT_CONSTRAINT. The distributed values for the four sides of the node have been combined as DISTRIBUTED. The side can be specified by defining a free port candidate on the desired side via the properties on TreeLayoutData.ports. See also section Ports for more information.

The MultiLayerSubtreePlacer (formerly GridNodePlacer) now automatically considers custom layers defined via the property multiLayerSubtreePlacerLayerIndices. It is no longer necessary to set the property automaticRowAssignment, which has consequently been removed.

Classic Tree Layout

The ClassicTreeLayout has been superseded by the TreeLayout. To obtain similar results within a similar time frame, the following configuration may be used.

const subtreePlacer = new LevelAlignedSubtreePlacer()
subtreePlacer.alignPorts = false // required (default)
subtreePlacer.busAlignment = 0.6 // can be changed freely
subtreePlacer.dendrogramStyle = false // required (default)
subtreePlacer.layerSpacing = layerDistance // can be changed freely
subtreePlacer.polylineLabeling = false // required (default)
subtreePlacer.rootAlignment = SubtreeRootAlignment.CENTER_OF_PORTS // required
subtreePlacer.edgeRoutingStyle =
  LevelAlignedSubtreePlacerRoutingStyle.ORTHOGONAL // or StraightLine
subtreePlacer.spacing = nodeDistance // should be at most BusAlignment * LayerSpacing
subtreePlacer.verticalAlignment = 0.5 // required (default)

const treeLayout = new TreeLayout({
  defaultSubtreePlacer: subtreePlacer
})

Aspect Ratio Tree Layout

The AspectRatioTreeLayout has been superseded by the TreeLayout with the AspectRatioSubtreePlacer. To obtain similar results, use the following configuration, which depends on the previous value of the rootPlacement.

const subtreePlacer = new AspectRatioSubtreePlacer({
  childArrangement: childArrangement,
  rootPlacement: rootPlacement
})

const treeLayout = new TreeLayout({
  defaultSubtreePlacer: subtreePlacer
})

Major Changes to Expert API

The changes described in this chapter only affect developers who work directly with the LayoutGraph API, such as those writing custom layout algorithms.

Several protected methods of the TreeLayout class have been removed. In many case, these protected methods allowed for customizations that are better handled by setting appropriate values through the appropriate TreeLayoutData properties. The remaining methods still allow extensive customization of the layout process.