This chapter describes facilities to arrange entire collections of graph elements simultaneously while taking into account certain constraints between them and with regard to their relative placement. First, we will deal with hierarchical data sets and the tree-like graphs that express their specific topology. Then we will deal with sets of data points subject to more general constraints, such as networks.
Hierarchical, tree-like data structures occur frequently, and D3 includes a number of different layouts to represent them as graphs. As explained in Chapter 5, layouts ingest a data set, calculate the appropriate sizes and positions, and add them to the input data set in the form of additional member variables. But layouts don’t create any graphical elements; it is up to the calling code to make use of the information added by the layout.
The D3 hierarchical layouts require the data to be represented as a
tree of D3
Node instances (see Tables 9-1 and 9-2).1 If the data is
in a hierarchical format already, it can be converted immediately using
d3.hierarchy(). The only requirement is that every node in
the original data structure has knowledge about its own children.
If the data is instead provided as a tabular set of links between
parent and child nodes, then
d3.stratify() can construct the
required tree of
Node instances (check the D3 Reference Documentation).