I created some line charts on d3. After that I appended some circles to every 3rd element in the line. Now I want to append text to those circles.

// created a circle variable

var circles=g2
    .append("g")
    .attr("id","symbols-b")
    .selectAll("circles")
    .data(slicesCircle)
    .enter()
    .append("g")

    circles.style("fill", function(d){
      return d.color=color(d.id);
    })

//append circles

    circles
    .selectAll("circle")
    .data(function (d){return d.values})
    .enter()
    .filter((d,i)=>(i%3==0) && i>0) //to attach every 3rd datapoint
    .append("circle")
    .attr("r", 7.5)
    .attr("cx", function(d,i) {return xScale(d.date);})
    .attr("cy", function(d,i) {return yScale(d.measurement);})

// Using the circle variable again to append text
    circles
    .selectAll("circle")
    .data(function (d){return d.values})
    .enter()
    .filter((d,i)=>(i%3==0) && i>0)
    .append("text")
    .attr("x",function(d,i) {return xScale(d.date);})
    .attr("y",function(d,i) {return yScale(d.measurement);})
    .text("0") // testing with 0
    .style("stroke","white")
    .style("font-size","12px")

But when I am running the code, the last 2 blocks despite being the same are generating different outputs. The circles are being generated nicely but when I am appending text to the same block of code, it is beginning later. Unable to understand why so..