D3 filter data every three rows in line chart label

Question

I am working on a line chart based on the tutorial https://datawanderings.com/2019/11/01/tutorial-making-an-interactive-line-chart-in-d3-js-v-5/ For the code block below, I want to add points every three rows (every three days):

//---------------------------POINTS-----------------------------// 
lines.selectAll("points")
    .data(function(d) {return d.values})
    .enter()
    .append("circle")
    .attr("cx", function(d) { return xScale(d.date); })      
    .attr("cy", function(d) { return yScale(d.measurement); })    
    .attr("r", 10)
    .attr("class","point")
    .style("opacity", 1);

I followed the link Add a Circle for Every nth Data Element d3.js, and tried to change it to

//---------------------------POINTS-----------------------------// 
lines.selectAll("points")
    .data(slices.filter(function(d,i) {return i%3 == 0}))
    .enter()
    .append("circle")
    .attr("cx", function(d, i) { return xScale(d.date); })      
    .attr("cy", function(d, i) { return yScale(d.measurement); })    
    .attr("r", 10)
    .attr("class","point")
    .style("opacity", 1);

However, all the points appears to locate at the left top corner of the graph.

May I ask what I did wrong, and how can I modify my code to make the circles to locate on the lines as showing the circles every three days? Thank you!