Attaching data to visual elements

Now let's attach each of the JavaScript objects in our runs array to a circle in our SVG. Once we do this, each circle can access the data of its associated run object to determine its position. Add the following to the bottom of app.js:

yScale.range([HEIGHT, 0]);
yScale.domain([0, 10]);//selectAll is like select,//but it selects all elements that match the query stringd3.selectAll('circle').data(runs);

If there were more objects in our runs array than there are circles, the extra objects are ignored. If there are more circles than objects, then JavaScript objects are attached to circles in the order in which they appear in the DOM until there are no more objects to attach.

Get D3.js Quick Start Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.