📄 d3/d3-hierarchy/cluster

File: cluster.md | Updated: 11/15/2025

Source: https://d3js.org/d3-hierarchy/cluster

Skip to content

Return to top

Cluster

===========================================================

/Chaos/Chaos/Eros/Chaos/Erebus/Chaos/Tartarus/Chaos/Gaia/Chaos/Gaia/Mountains/Chaos/Gaia/Pontus/Chaos/Gaia/UranusEros/Chaos/ErosErebus/Chaos/ErebusTartarus/Chaos/TartarusMountains/Chaos/Gaia/MountainsPontus/Chaos/Gaia/PontusUranus/Chaos/Gaia/UranusChaos/ChaosGaia/Chaos/Gaia

Examples · The cluster layout produces dendrograms : node-link diagrams that place leaf nodes of the tree at the same depth. Dendrograms are typically less compact than tidy trees , but are useful when all the leaves should be at the same level, such as for hierarchical clustering or phylogenetic tree diagrams .

cluster()


Source · Creates a new cluster layout with default settings.

cluster(root)


Source · Lays out the specified root hierarchy , assigning the following properties on root and its descendants:

  • node.x - the x-coordinate of the node
  • node.y - the y coordinate of the node

The coordinates x and y represent an arbitrary coordinate system; for example, you can treat x as an angle and y as a radius to produce a radial layout . You may want to call root.sort before passing the hierarchy to the cluster layout.

cluster.size(size)


Source · If size is specified, sets this cluster layout’s size to the specified two-element array of numbers [width, height] and returns this cluster layout. If size is not specified, returns the current layout size, which defaults to [1, 1]. A layout size of null indicates that a node size will be used instead. The coordinates x and y represent an arbitrary coordinate system; for example, to produce a radial layout , a size of [360, radius] corresponds to a breadth of 360° and a depth of radius.

cluster.nodeSize(size)


Source · If size is specified, sets this cluster layout’s node size to the specified two-element array of numbers [width, height] and returns this cluster layout. If size is not specified, returns the current node size, which defaults to null. A node size of null indicates that a layout size will be used instead. When a node size is specified, the root node is always positioned at ⟨0, 0⟩.

cluster.separation(separation)


Source · If separation is specified, sets the separation accessor to the specified function and returns this cluster layout. If separation is not specified, returns the current separation accessor, which defaults to:

js

function separation(a, b) {
  return a.parent == b.parent ? 1 : 2;
}

The separation accessor is used to separate neighboring leaves. The separation function is passed two leaves a and b, and must return the desired separation. The nodes are typically siblings, though the nodes may be more distantly related if the layout decides to place such nodes adjacent.