Pack Layout

API Reference ▸ Layouts

Like most other layouts, the object returned by d3.layout.pack is both an object and a function. That is: you can call the layout like any other function, and the layout has additional methods that change its behavior. Like other classes in D3, layouts follow the method chaining pattern where setter methods return the layout itself, allowing multiple setters to be invoked in a concise statement.

# d3.layout.pack()

Creates a new pack layout with the default settings: the default sort order is by ascending value; the default children accessor assumes each input node is an object with a children array; the default size is 1×1.

The pack layout is part of D3's family of hierarchical layouts. These layouts follow the same basic structure: the input argument to the layout is the root node of the hierarchy, and the output return value is an array representing the computed positions of all nodes, along with several other attributes:

• parent - the parent node, or null for the root.
• children - the array of child nodes, or null for leaf nodes.
• value - the node value, as returned by the value accessor.
• depth - the depth of the node, starting at 0 for the root.
• x - the computed x-coordinate of the node position.
• y - the computed y-coordinate of the node position.
• data - the underlying data represented by this node.

Note that these position objects are not the same as the input data passed to the layout function; the computed layout nodes wrap the data objects.

# pack.sort([comparator])

If comparator is specified, sets the sort order of sibling nodes for the layout using the specified comparator function. If comparator is not specified, returns the current group sort order, which defaults to ascending order by the associated input data's numeric value attribute:

function comparator(a, b) {
  return a.value - b.value;
}

The comparator function is invoked for pairs of nodes, being passed the input data for each node. A null comparator disables sorting and uses tree traversal order. Comparator functions may also be implemented using d3.ascending or d3.descending.

# pack.children([children])

# pack.links(nodes)

# pack.value([value])

# pack.size([size])