d3js : How to select nth element of a group?

Question

I create a group with 9 elements (circles) such as:

// JS
var data=[ 1,2,3,4,5,6,7,8,9 ];
var svg = d3.select("body").append("svg");
var circles = svg.append("g").attr("id", "groupOfCircles")
    .selectAll("circle")
        .data(data)
    .enter().append("circle")
        .attr("cx", function(d){ return d*20;})
        .attr("cy", function(d){ return d*10;})
        .attr("r" , function(d){ return d;})
        .attr("fill","green");

//xml
<svg>
    <g id="groupOfCircles">
        <circle cx="20" cy="10" r="1" fill="green"></circle>
        <circle cx="40" cy="20" r="2" fill="green"></circle>
        <circle cx="60" cy="30" r="3" fill="green"></circle>
        <circle cx="80" cy="40" r="4" fill="green"></circle>
        <circle cx="100" cy="50" r="5" fill="green"></circle>
        <circle cx="120" cy="60" r="6" fill="green"></circle>
        <circle cx="140" cy="70" r="7" fill="green"></circle>
        <circle cx="160" cy="80" r="8" fill="green"></circle>
        <circle cx="180" cy="90" r="9" fill="green"></circle>
    </g>
</svg>

But How to select the nth element (i.e : the 3rd circle) of the group groupOfCircles while not knowing the circles' id or attributes values ?

I will later on loop over all elements via a for loop, and color each for one second.

---

Note: I tried things such as :

  circles[3].attr("fill","red") // not working
  d3.select("#groupOfCircles:nth-child(3)").attr("fill","red")  // not working
  ..

Answer 1

The selector needs to be circle:nth-child(3) -- the child means that the element is the nth child, not to select the nth child of the element (see here).

You could also use:

    // JS
    var data=[ 1,2,3,4,5,6,7,8,9 ];
    var svg = d3.select("body").append("svg");
    var circles = svg.append("g").attr("id", "groupOfCircles")
        .selectAll("circle")
            .data(data)
        .enter().append("circle")
            .attr("cx", function(d){ return d*20;})
            .attr("cy", function(d){ return d*10;})
            .attr("r" , function(d){ return d;})
            .attr("fill","green");
    
    d3.select("circle:nth-child(3)").attr("fill","red"); // <== CSS selector (DOM)
    d3.select(circles[0][4]).attr("fill","blue"); // <== D3 selector (node)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>