I have successfully created some line charts on d3 and then added circles to every 3rd element of the line. Now I am attempting to add text to those circles as well.
// defining 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);
})
//appending circles to the graph
circles
.selectAll("circle")
.data(function (d){return d.values})
.enter()
.filter((d,i)=>(i%3==0) && i>0) //attaching every 3rd data point
.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 add text to the circles
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") // just for testing with 0 value
.style("stroke","white")
.style("font-size","12px")
However, upon running the code, I noticed that the last two blocks of code produce different outcomes. The circles are displayed correctly, but there seems to be a delay when adding text to themhttps://i.sstatic.net/j8cjK.png. I am puzzled as to why this is happening..