Your first taste of a D3 selection was simple, and involved only one element:
d3.select("body"). Then you learned about
selectAll() for selecting multiple elements. When we introduced binding data to elements, you learned about the now-familiar selectAll/data/enter/append pattern for creating new elements. Later, you saw how to use
merge() to combine selections (such as when applying updates to a chart) and
exit() to select elements on their way out. In Chapter 11, you saw examples of how
datum() could be used to bind data to a single element, bypassing the usual data join process.
For many visualizations, that’s all you’ll need to know. But as you begin to dream up more complex and interactive pieces, a deeper understanding of selections and how you can manipulate them will make your life a lot easier.
Let’s explore some of the possibilities.
What is a selection, really? I am here to demystify this concept for you. (Does that make me a demystic?)
Let’s look closely at a very simple selection. Note the result of
d3.select("body") in Figure 12-1.
So, a selection contains two arrays,
_parents. We can disregard
_parents and also the