Javascript 将形状向上移动&；在格子里

我有一个我想要上下移动的圆圈网格（见左图）。但是，我的代码会导致圆聚集到顶部，并且这一行会上下移动（参见右图）。我怎么修理？

代码

  var circles = svg6.selectAll("circle")
                 .data(getCircles(radius,color)).enter()
                 .append("circle")
                 .attr("class", function (d, i) { return "svg6-circles svg6-circle-" + i; })
                  .attr("cx", function (d, i) {
                    var remainder= i % numCols; //calculates the x position (column number) using modulus
                    return xPadding+(remainder*vBuffer); //apply the buffer and return value
                  })
                  .attr("cy", function (d, i) {
                    var whole=Math.floor(i/numCols); //calculates the y position (row number)
                    return yPadding+(whole*hBuffer);//apply the buffer and return the value
                  });

d3.selectAll(".svg6-circles").each(slide);

//Slide circles up & down
function slide(d) {
            var circle = d3.select(this);
            var element = d;
            (function repeat() {

                //Move the circle up & down
            circle = circle.transition().duration(900)
                .attr("cy", function (d, i) {
            var whole=Math.floor(i/numCols); //calculates the y position (row number)
            var yPos = yPadding+(whole*hBuffer) //apply the buffer and return the value
            return yPos + radius/2*0.9;
          })
                .transition().duration(900)
                .attr("cy", function (d, i) {
            var whole=Math.floor(i/numCols); //calculates the y position (row number)
            var yPos = yPadding+(whole*hBuffer) //apply the buffer and return the value
            return yPos - radius/2*0.9;
          })
                .each("end", repeat);
            })();
        }

---

嘿，亚历克斯，对不起，我不确定从你的照片上看，你想要实现的目标体验与现在发生的情况相比是什么1。调试vBuffer和hBuffer的值。vBuffer用于x值和hBuffer用于y值是否正确？2. <代码>选择。每个（“结束”，重复）都不是有效的表达式。你是说

选择。结束（重复）

？