Class pv.Layout.Treemap
Extends
pv.Layout.Hierarchy.
Implements a space-filling rectangular layout, with the hierarchy
represented via containment. Treemaps represent nodes as boxes, with child
nodes placed within parent boxes. The size of each box is proportional to the
size of the node in the tree. This particular algorithm is taken from Bruls,
D.M., C. Huizing, and J.J. van Wijk, "Squarified Treemaps" in
Data Visualization 2000, Proceedings of the Joint Eurographics and IEEE
TCVG Sumposium on Visualization, 2000, pp. 33-42.
The meaning of the exported mark prototypes changes slightly in the space-filling implementation:
- node - for rendering nodes; typically a pv.Bar. The node data is populated with dx and dy attributes, in addition to the standard x and y position attributes.
- leaf - for rendering leaf nodes only, with no fill or stroke style by default; typically a pv.Panel or another layout!
- link - unsupported; undefined. Links are encoded implicitly in the arrangement of the space-filling nodes.
- label - for rendering node labels; typically a pv.Label.
Defined in: Treemap.js.
| Constructor Attributes | Constructor Name and Description |
|---|---|
|
Constructs a new, empty treemap layout.
|
| Field Attributes | Field Name and Description |
|---|---|
|
Default propertiess for treemap layouts.
|
|
|
The treemap algorithm.
|
|
|
The sibling node order.
|
|
|
The bottom inset between parent and child in pixels.
|
|
|
The left inset between parent add child in pixels.
|
|
|
The right inset between parent add child in pixels.
|
|
|
The top inset between parent and child in pixels.
|
|
|
Whether node sizes should be rounded to integer values.
|
- Fields borrowed from class pv.Layout.Network:
- label, link, node
- Fields borrowed from class pv.Panel:
- canvas, children, overflow, transform
- Fields borrowed from class pv.Bar:
- fillStyle, height, lineWidth, strokeStyle, width
- Fields borrowed from class pv.Mark:
- bottom, childIndex, cursor, data, events, index, left, parent, proto, reverse, right, root, scale, title, top, type, visible
| Method Attributes | Method Name and Description |
|---|---|
|
padding(n)
Alias for setting the left, right, top and bottom padding properties
simultaneously.
|
|
|
size(f)
Specifies the sizing function.
|
- Methods borrowed from class pv.Layout.Network:
- reset
- Methods borrowed from class pv.Panel:
- add, anchor
- Methods borrowed from class pv.Mark:
- anchorTarget, def, event, extend, margin, mouse, render
Class Detail
pv.Layout.Treemap()
Constructs a new, empty treemap layout. Layouts are not typically
constructed directly; instead, they are added to an existing panel via
pv.Mark#add.
Field Detail
{pv.Layout.Treemap}
defaults
Default propertiess for treemap layouts. The default mode is "squarify" and
the default order is "ascending".
{string}
mode
The treemap algorithm. The default value is "squarify". The "slice-and-dice"
algorithm may also be used, which alternates between horizontal and vertical
slices for different depths. In addition, the "slice" and "dice" algorithms
may be specified explicitly to control whether horizontal or vertical slices
are used, which may be useful for nested treemap layouts.
- See:
- "Ordered Treemap Layouts" by B. Shneiderman & M. Wattenberg, IEEE InfoVis 2001.
{string}
order
The sibling node order. A null value means to use the sibling order
specified by the nodes property as-is; "reverse" will reverse the given
order. The default value "ascending" will sort siblings in ascending order of
size, while "descending" will do the reverse. For sorting based on data
attributes other than size, use the default null for the order
property, and sort the nodes beforehand using the pv.Dom operator.
{number}
paddingBottom
The bottom inset between parent and child in pixels. Defaults to 0.
- See:
- #padding
{number}
paddingLeft
The left inset between parent add child in pixels. Defaults to 0.
- See:
- #padding
{number}
paddingRight
The right inset between parent add child in pixels. Defaults to 0.
- See:
- #padding
{number}
paddingTop
The top inset between parent and child in pixels. Defaults to 0.
- See:
- #padding
{boolean}
round
Whether node sizes should be rounded to integer values. This has a similar
effect to setting antialias(false) for node values, but allows the
treemap algorithm to accumulate error related to pixel rounding.
Method Detail
{pv.Layout.Treemap}
padding(n)
Alias for setting the left, right, top and bottom padding properties
simultaneously.
- Parameters:
- n
- Returns:
- {pv.Layout.Treemap} this.
{pv.Layout.Treemap}
size(f)
Specifies the sizing function. By default, the size function uses the
nodeValue attribute of nodes as a numeric value: function(d)
Number(d.nodeValue).
The sizing function is invoked for each leaf node in the tree, per the nodes property. For example, if the tree data structure represents a file system, with files as leaf nodes, and each file has a bytes attribute, you can specify a size function as:
.size(function(d) d.bytes)
- Parameters:
- {function} f
- the new sizing function.
- Returns:
- {pv.Layout.Treemap} this.