IT:AD:D3.JS:HowTo:Selectors

Summary

D3 provides two top-level methods in order to select elements: select/ and selectAll/.

Much like IT:AD:JQuery, D3 Selectors are used to select together things on which to perform Operations on.

x = d3.select('body')...         //select by tag
x = d3.select('.awesome')...     //select by class
x = d3.select('#foo')...         //select by unique identifier
x = d3.select('[color=red]')...  //select by attribute
x = d3.select('parent child')... //select by container

// 
x = d3.select('.this.that')...   //logical AND intersection
x = d3.select('.this, .that')... //logical OR union

If your browser doesn't support selectors natively, you can include IT:AD:Sizzle.JS before D3 for backwards-compatibility.

Selections are simply (enhanced) arrays of DOM elements.

And when data() is applied to a selection, the data is embedded directly into the DOM elements as __data__ attributes.

One nuance is that selections are grouped: rather than a one-dimensional array, each selection is an array of arrays of elements.

See http://bost.ocks.org/mike/selection/ for a great article on this point.

select selects the first element that matches the given criteria.

selectAll selects all elements that match the given filter.