D3 for the Impatient

Chapter 9. Trees and Networks

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.

Trees and Hierarchical Data Structures

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.

Preparing the Data

The D3 hierarchical layouts require the data to be represented as a tree of D3 Node instances (see Tables 9-1 and 9-2).¹ 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).

Table 9-1. Methods of D3 ...