liveBook · Manning

Descendants()

As explained in D3.js in Action, Third Edition

descendants() is a hierarchy-node method that returns an array containing a node and all nodes below it in the hierarchy.

descendants() is a hierarchy-node method that returns an array containing the current node and every node below it in the tree. It works on hierarchies created from CSV data with d3.stratify() or hierarchical JSON with d3.hierarchy(). section 11.1.2 section 11.1.1

Collecting every language node

Convert hierarchical JSON into a root node, then call root.descendants(). The resulting array includes Languages, Indo-European, Germanic, English, and the other nodes in the hierarchy. Keep leaves() separate when you need only nodes without children. section 11.1.2 section 11.5

{
  "name": "Languages",
  "children": [
    {
      "name": "Indo-European",
      "children": [
        {
          "name": "Germanic",
          "children": [
            {
              "name": "English"
            }
          ]
        },
        {
          "name": "Indo-Aryan",
          "children": [
            {
              "name": "Hindi"
            }
          ]
        },
        {
          "name": "Romance",
          "children": [
            {
               "name": "Spanish"
            },
            {
               "name": "French"
            }
          ]
        },
      ]
    },
    {
      "name": "Sino-Tibetan",
      "children": [
        {
          "name": "Sinitic",
          "children": [
            {
              "name": "Mandarin Chinese"
            }
          ]
        }
      ]
    }
  ]
}

Use the nested language dataset to trace which nodes descendants() will return. section 11.1.2

How D3.js in Action, Third Edition covers it

How deep it goes
Defines the returned array and contrasts it with leaves(), but does not detail traversal internals or ordering.
Examples
Uses a language hierarchy containing Languages, Indo-European, Germanic, English, and other language nodes.
What it assumes
Assumes JavaScript and hierarchy creation, while demonstrating both CSV parent-child columns and nested JSON inputs.
What you can do after
Apply descendants() to obtain all hierarchy nodes for subsequent visualization construction.
How it connects
Connects d3.hierarchy(), d3.stratify(), leaves(), and hierarchical visualizations.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.