javascript - how to position circles in straight row using d3.js -

javascript - how to position circles in straight row using d3.js -

i apologize in advance, exclusively new d3.js in particular , programming in general. goal draw svg circle each info point in dataset. circles begin @ top left, , move right until reach end of window, , start 1 time again on left, below previous line of circles drawn.

my global variables are:

var counterx = 1; var countery = 20; var windowwidth = window.innerwidth; var rowsize = windowwidth/12; //i chose 20 bc each circle has radius of 5.

and x & y attributes are:

.attr("cx", function(d, i) { if(i%rowsize==0){counterx == 0} else{return counterx++} }) .attr("cy", function(d, i){ if(i%rowsize==0){return 12*countery++} homecoming countery; })

i don't understand why counterx not reseting when i%rowsize==0 , , can't figure out how move y variable downwards 1 time row drawn.

javascript svg d3.js