-
Book Overview & Buying
-
Table Of Contents
Learn D3.js - Second Edition
By :
This section outlines three interactive behaviors you can add to a tidy tree or dendrogram: path highlighting, using a subtree as the root, and navigating by expanding/collapsing nodes. Techniques are described with the relevant code fragments. See Trees/Interactive/ for the full code.
Any node in a hierarchy object can call the path() method (Table 15.4) to obtain the path between two arbitrary points in a tree. Using descendants() and ancestors(), you can filter nodes based on their data and reveal the path graphically.
The Trees/Interactive/1-highlight.html page displays a tree and highlights the path from any node to the root node on mouse hover. If you click on a node, it becomes the new destination, allowing you to view the path to reach it from another node.
The following CSS configures styles that will be activated via the selection’s classed method:
path.faded { stroke: lightgray }
path.highlighted { stroke: red ...