Use data attached to a visual element to affect its appearance

We can change attributes for a selection of DOM elements by passing static values, and all selected elements will have that attribute set to that one specific value. Add the following temporarily to the end of app.js:

d3.selectAll('circle').attr('cy', 300);

The following should be seen on your screen:

But now that each circle has one of our runs JavaScript data objects attached to it, we can set attributes on each circle using that data. We do that by passing the .attr() method a callback function instead of a static value for its second parameter. Remove d3.selectAll('circle').attr('cy', ...

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.