These selectors can be used against the entire document, if called as
d3.selectAll('circle'), or against existing selections like our
svg element as
svg.selectAll('circle'). The first form will select all
circle elements in the document, the second will only select all
circle elements within the
svg group. The elements returned are called a selection.
Attributes, styles, and properties applied to a selection are applied to all elements within the selection:
will set all of the circle's
cy attributes to be equal to 50.
This, combined with an update function, gives us a powerful, concise way to update many objects simultaneously. However, in this example we're still creating all of the circles individually. D3 gives us an even more powerful technique, which we'll explore in the next example.
You may know these from jQuery or from CSS. They're pretty universal in the web world. ↩