This layout algorithm produces tree map layouts.
Remarks
Layout Style
Tree maps are suitable to visualize hierarchical data structures. They use nested rectangles to do so, where the size of the rectangles encodes its weight. More generally, the area of a rectangle is proportional to a specific dimension of data associated to it.
Tree maps can, for example, be used to show a file structure on a hard disk, where the dimension of data is the size of the files/folders. There are many other use cases where the tree map can show the distribution of the dimension of data among the entities in a hierarchy.
Concept
TreeMapLayout offers implementations of the well-known treemapping-algorithms Slice-and-Dice and Squarified. These tiling policies divide a rectangle with a given size into multiple sub-rectangles. Speaking in terms of graphs this means that nodes are placed in a nested fashion such that child nodes are placed inside the parent node.
Importantly, node sizes are changed by this layout algorithm to show the proportional weight of a node in the map. The weight is specified by registering a IDataProvider with key NODE_WEIGHT_DP_KEY with the input graph.
Features
The input can be specified in two ways:
- As a hierarchic grouping structure that defines the nesting. Note that for group nodes, the specified insets are considered (see GROUP_NODE_INSETS_DP_KEY). If the graph is a tree graph, then the grouping structure is ignored - see second input variant. To continue using the hierarchy information of the grouping structure on a tree graph, one can temporarily hide the tree edges before running the layout.
- As a directed tree graph. The parent-child relation is directly taken from the graph's tree structure. If the graph also contains group nodes, the hierarchy relation induced by them is ignored. If necessary, an undirected tree can be (temporarily) directed prior to the layout run by using directTree. The tree needs to be directed from the root (top-level hierarchy) to the children (lower-level hierarchies). Note that a forest graph is no valid input.
The offered tiling policies produce drawings with a quite different style. SLICE_AND_DICE offers results that have a stable, clear ordering but the rectangles have a high aspect ratio. On the other hand, SQUARIFIED tries to create rectangles close to a given aspect ratio - in consequence, the ordering of neighbor nodes might not be clearly predictable.
Default Values of Properties
| minimumNodeSize | YDimension | Minimum width and height are 10.0. |
| nodeComparer | NodeWeightComparer | Nodes are ordered with respect to their weight (higher weight first). |
| preferredSize | YDimension | Preferred width and height are 600. |
| spacing | 5 | |
| tilingPolicy | SQUARIFIED |
Type Details
- yfiles module
- layout-tree
- yfiles-umd modules
- layout-orthogonal-compact, layout-orthogonal, layout-tree, layout
- Legacy UMD name
- yfiles.tree.TreeMapLayout
See Also
0 and do not specify insets for the group nodes that have children (if input is specified as grouping structure).Constructors
Initializes a new instance of the TreeMapLayout class with default settings.
Parameters
A map of options to pass to the method.
- tilingPolicy - TilingPolicy
The tiling policy that defines how the input is divided into sub-rectangles. This option sets the tilingPolicy property on the created object.
- nodeComparer - IComparer<Object>
The IComparer<T> that defines the order in which child nodes are placed inside their parent node. This option sets the nodeComparer property on the created object.
- minimumNodeSize - YDimension
The minimum size (height and width) a node in the tree map must have. This option sets the minimumNodeSize property on the created object.
- preferredSize - YDimension
The desired dimension of the root rectangle into which all nodes are placed. This option sets the preferredSize property on the created object.
- aspectRatio - number
The target aspect ratio of the squarified tiling policy. This option sets the aspectRatio property on the created object.
- spacing - number
The spacing between nodes of the same hierarchy. This option sets the spacing property on the created object.
Properties
Gets or sets the target aspect ratio of the squarified tiling policy.
Remarks
The aspect ratio must be greater than or equal to 1. A ratio of 1 means that the node rectangles should ideally be squares. The orientation of the rectangles does not matter. For example, a ratio of 2 means that rectangles with an aspect ratio of 1:2 or also 2:1 are desired.
This setting affects the ratio of a single node rectangle. To create a tree map with a certain overall aspect ratio, the preferred size can be specified accordingly.
Default Value
1.The target is to draw square nodes.
Throws
- Exception({ name: 'ArgumentError' })
- if the given aspect ratio is smaller than
1
See Also
Gets or sets the minimum size (height and width) a node in the tree map must have.
Remarks
Default Value
Throws
- Exception({ name: 'ArgumentError' })
- if the width or height of the given size is smaller than
5or if the given minimum size isnull
See Also
Gets or sets the IComparer<T> that defines the order in which child nodes are placed inside their parent node.
Default Value
Nodes are ordered with respect to their weight (higher weight first).
Throws
- Exception({ name: 'ArgumentError' })
- if the given
is null
See Also
Gets or sets the desired dimension of the root rectangle into which all nodes are placed.
Remarks
Default Value
Throws
- Exception({ name: 'ArgumentError' })
- if the given size is
nullor if its width/height value is less than or equal tozero
See Also
Gets or sets the spacing between nodes of the same hierarchy.
Remarks
Default Value
5.Throws
- Exception({ name: 'ArgumentError' })
- if the given spacing is negative
See Also
Sample Graphs
Gets or sets the tiling policy that defines how the input is divided into sub-rectangles.
Default Value
Throws
- Exception({ name: 'ArgumentError' })
- if an unknown policy is specified
See Also
Methods
Arranges the given input graph as a tree map.
Remarks
Parameters
A map of options to pass to the method.
- graph - LayoutGraph
- the input graph
See Also
Implements
Constants
A data provider key for specifying the weight of the nodes.
Remarks
The weight of a node defines the area assigned to the node inside the available parent area with respect to the other child nodes. Child nodes with the same weight get the same area, they do not necessarily get equal width and height values.
All leaf nodes (nodes without further children, including empty group nodes) must have a weight greater than 0. Non-leaf nodes do not need to have a weight. They will basically get the sum of the weight of their children. If they have a weight on their own, some free space is generated inside the representative rectangle (i.e. the parent node is larger than the combined children).
| Domain | YNode | the nodes of the input graph |
| Values | number | the weight value of the node |