How to Use Selection in D3

In the previous article we have gone through the introduction of D3. Here we are going to discuss about a certain feature of D3 called selection.

What is selection?

A selection is an array of elements pulled from the current document. D3 uses CSS3 to select elements. For example, we can select by tag (“div”), class (“.awesome”), unique identifier (“#foo”), attribute (“[color=red]”), or containment (“parent child”). Selectors can also be intersected (“.this.that” for logical AND) or unioned (“.this, .that” for logical OR). If our browser doesn’t support selectors natively, we can include Sizzle before D3 for backwards-compatibility.

After selecting elements, we can apply operators to them to do stuff. These operators can get or set attributes, styles, properties, HTML and text content. Attribute values and such are specified as either constants or functions; the latter are evaluated for each element. We can also join selections to data; this data is available to operators for data-driven transformations. In addition, joining to data produces enter and exit subselections, so that we may add or remove elements in response to changes in data.

Elements Selection:

D3 provides two top-level methods for selecting elements: select and selectAll. These methods accept selector strings; the former selects only the first matching element, while the latter selects all matching elements in document traversal order. These methods can also accept nodes, which is useful for integration with third-party libraries such as jQuery or developer tools ($0).

# d3.select(selector)

Selects the first element that matches the specified selector string, returning a single-element selection. If no elements in the current document match the specified selector, returns the empty selection. If multiple elements match the selector, only the first matching element (in document traversal order) will be selected.

d3.select("div")
   .style("background-color","steelblue");

select selection

# d3.select(node)

Selects the specified node. This is useful if you already have a reference to a node, such as d3.select(this) within an event listener, or a global such as document.body.

# d3.selectAll(selector)

Selects all elements that match the specified selector. The elements will be selected in document traversal order (top-to-bottom). If no elements in the current document match the specified selector, returns the empty selection.

d3.selectAll("div")
   .style("background-color","steelblue");

selectAll selection

# d3.selectAll(nodes)

Selects the specified array of elements. This is useful if you already have a reference to nodes, such as d3.selectAll(this.childNodes) within an event listener, or a global such as document.links. The nodes argument doesn’t have to be an array, exactly; any pseudo-array that can be coerced into an array (e.g., a NodeList or arguments) will work.

As we can see in the above examples , when we use select command the 1st div changes it’s color. But the 2nd div stays normal. In case of selectAll command both of the div changes their color.

This is a basic example of selection in d3. In later articles we will go deeper with this feature.

If you find this article helpful, you can connect us in Google+ and Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *