Chapter 2. Be Selective

In this chapter we will cover:

  • Selecting a single element
  • Selecting multiple elements
  • Iterating through a selection
  • Performing subselection
  • Function chaining
  • Manipulating raw selection

Introduction

One of the most fundamental tasks that you 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 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 has been standardized by W3C so all modern web browsers have built-in support for the selector API. However the basic W3C selector API has its limitations when it comes to web development, especially in the data visualization realm. The standard W3C selector API only provides selector but not 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, in order to manipulate the selected element(s). Consider the following code snippet using the standard selector API:

var i = document.querySelectorAll("p").iterator();
var e;
while(e = i.next()){
  // do something with each element selected
  console.log(e);
}

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. For the rest of this chapter we will cover how D3's selection API works as well as some of its powerful features.

CSS3 selector basics: Before we dive 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 more commonly known as the CSS3 selector support. In this section, we plan to go through some of the most common CSS3 selector syntax that are required to understand D3 selection API.

  • #foo: select element with foo as the value of id
    <div id="foo">
  • foo: select element foo
    <foo>
  • .foo: select elements with foo as the value of class
    <div class="foo">
  • [foo=goo]: select elements with the foo attribute value and set it to goo
    <div foo="goo">
  • foo goo: select the goo element inside the foo element
    <foo><goo></foo>
  • foo#goo: select the foo element set goo as the value of id
    <foo id="goo">
  • foo.goo: select the foo element with goo as the value of class
    <foo class="goo">
  • foo:first-child: select the first child of the foo elements
    <foo> // <-- this one
<foo>
<foo>
  • foo:nth-child(n): select the nth child of the foo elements
    <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 to be effective when working with D3. For more information on this topic please visit the W3C level-3 selector API document http://www.w3.org/TR/css3-selectors/.

Tip

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

Currently the next generation selector API level-4 is in draft stage with W3C. You can have a peek at what it has to offer and its current draft here at http://dev.w3.org/csswg/selectors4/

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/.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset