Selections

A selection is an array of elements pulled from the current document according to a particular CSS selector. This can be anything from a class, to an ID, to a tag name. We can even use pseudo-selectors, allowing us to do things, such as selecting every other paragraph tag using p:nth-child(n+1).

Pseudo-selectors are really powerful when used with D3 and can often be used in place of a loop or some really difficult math. They're the types of selectors that have a colon in front and describe an element's state. A good example is :hover, which is active when the mouse cursor is above an element.

Using CSS selectors to create a chained series of manipulations gives us a simple language for defining elements in the document. It's actually the same as you're used to in jQuery and CSS.

To get the first element with ID as graph, we use d3.select('#graph') . To get all the elements with the class blue, we write d3.selectAll('.blue') . To get all the paragraphs in a document, we use d3.selectAll('p').

We can combine these to get a more complex matching. You can perform a Boolean AND operation using the selector .llama.duck; it will get elements that have both the .llama and .duck classes. Alternatively, you might perform an OR operation with .llama, .duck to get every element that is either a llama or a duck. However, what if you want to select child elements? Then, nested selections to the rescue!

You can do it with a simple selector, such as tbody td, or you can chain two d3.selectAll() calls as d3.selectAll('tbody').selectAll('td'). Both will select all the cells in a table body. Keep in mind that nested selections maintain the hierarchy of selected elements, which gives us some interesting capabilities.