如何使用d3.js将圆圈定位在直线上

Question

我提前道歉，因为我特别擅长d3.js和编程。我的目标是为我的数据集中的每个数据点绘制一个SVG圈。我希望圆圈从左上角开始，然后向右移动直到它们到达窗口的末端，然后再从左侧开始，但低于刚绘制的前一行圆圈。

我的全局变量是：

var counterX = 1;
var counterY = 20;
var windowWidth = window.innerWidth;
var rowSize = windowWidth/12; //I chose 20 bc each circle has a Radius of 5.

我的x＆amp; y属性是：

.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++}
        return counterY;
    })

我不明白为什么CounterX在i%rowSize==0时没有重置，而且我也无法弄清楚如何在完全绘制一行后将Y变量向下移动