Introduction

One of the most fundamental tasks that you will need to perform with any data visualization project using D3 is selection. Selection helps you target certain visual elements on the page. If you are already familiar with the W3C-standardized CSS selector or other similar selector APIs provided by popular JavaScript libraries, such as jQuery and Zepto.js, then you will find yourself right at home with D3's selection API. Don't worry if you haven't used the selector API before; this chapter is designed to cover this topic in steps with the help of some very visual recipes. It will cover pretty much all common use cases for your data visualization needs.

Introducing selection

Selector support is standardized by W3C, so all modern web browsers have built-in support for the selector API. However, the basic W3C selector API has limitations when it comes to Web development, especially in the data visualization realm. The standard W3C selector API provides only the selector, but not the selection. What this means is that the selector API helps you to select element(s) in your document; however, to manipulate the selected element(s), you still need to loop through each element. Consider the following code snippet using the standard selector API:

var selector = document.querySelectorAll("p"); 
selector.forEach(function(p){ 
    // do something with each element selected 
    console.log(p); 
}); 

The preceding code essentially selects all <p> elements in the document and then iterates through each element to perform some task. This can obviously get tedious quickly, especially when you have to manipulate many different elements on the page constantly, which is what we usually do in data visualization projects. This is why D3 introduced its own selection API, making development less of a chore. In the rest of this chapter, we will cover how D3's selection API works and some of its powerful features.

CSS3 selector basics

Before we pe into D3's selection API, some basic introduction on the W3C level-3 selector API is required. If you are already comfortable with CSS3 selectors, feel free to skip this section. D3's selection API is built based on the level-3 selector or is more commonly known as CSS3 selector support. In this section, we plan to go through some of the most common CSS3 selector syntaxes that are required to understand the D3 selection API. The following list contains some of the most common CSS3 selector conventions you will typically encounter in a data visualization project:

• #foo: Selects elements with foo as the value of id

       <p id="foo"> 
  

• foo: Selects element foo

       <foo> 
  

• .foo: Selects elements with foo as the value of class

       <p class="foo"> 
  

• [foo=goo]: Selects elements with the foo attribute value and sets it to goo

       <p foo="goo"> 
  

• foo goo: Selects the goo element inside the foo element

       <foo><goo></foo> 
  

• foo#goo: Selects the foo element with goo as the value of id

       <foo id="goo"> 
  

• foo.goo: Selects the foo element with goo as the value of class

       <foo class="goo"> 
  

• foo:first-child: Selects the first child of the foo elements

       <foo> // <-- this one 
       <foo> 
       <foo>  
  

• foo:nth-child(n): Selects the nth child of the foo elements (n is one-based, starting at 1 for the first child)

       <foo> 
       <foo> // <-- foo:nth-child(2) 
       <foo> // <-- foo:nth-child(3) 
  

CSS3 selector is a pretty complex topic. Here, we have only listed some of the most common selectors that you will need to understand and that you need to be effective when working with D3. For more information on this topic, please visit the W3C level-3 selector API document at http://www.w3.org/TR/css3-selectors/ .

Note

If you are targeting an older browser that does not support selector natively, you can include Sizzle before D3 for backward compatibility. You can find Sizzle at http://sizzlejs.com/ .

Currently, the next-generation selector API level-4 is in the draft stage with W3C. You can have a peek at what it has to offer and its current draft at https://drafts.csswg.org/selectors-4/ .

Major browser vendors have already started implementing some of the level-4 selectors; if you are interested to find out the level of support in your browser, try out this handy website:  http://css4-selectors.com/browser-selector-test/ .