Iterating through a selection

Sometimes it is handy to be able to iterate through each element within a selection and modify each element differently according to their position. In this recipe, we will show you how this can be achieved using D3 selection iteration API.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter2/selection-iteration.html .

How to do it...

D3 selection object provides a simple iterator interface to perform iteration in a similar fashion to how you will iterate through a JavaScript array. In this example, we will iterate through the three selected div elements we worked with in the previous recipe and annotate them with an index number as follows:

<div></div> 
<div></div> 
<div></div> 
 
<script type="text/javascript"> 
d3.selectAll("div") // <-- A 
            .attr("class", "red box")...