Add a Circle for Every nth Data Element d3.js

I am creating a grouped line graph in d3.js. I would like to add circles with tooltips for the data. However, doing this for every point becomes too crowded. Therefore, I would like to add circles to every third data point on the line.

I tried to do this with the following code:

svg2.selectAll("dot")

        .data(data)
        .enter().append("circle")
        .attr("r", 10)
        .attr('fill', "red")
        .attr("cx", function (d,i) {
            if (i%3 === 0 && i>0) {
                return xAxisScale(d.date);
            }
            else {
                return null;
            }
        })
        .attr("cy", function (d,i) {
            if (i%3 === 0 && i >0 ) {

                return yAxisScale(d.count);
            }
            else {
                return null;
            }

        })

However, for some reason, there seems to be an extraneous
point.

enter image description here

I am not sure why this is occurring or how to get rid of this. Any help would be greatly appreciated!

170 thoughts on “Add a Circle for Every nth Data Element d3.js”