向上移动形状＆amp;在网格中

Question

我有一个圆圈网格，我想要向上移动＆amp;向下（见左图）。但是，我的代码会导致圆圈聚集到顶部并且单行上下移动（参见右图）。我该如何解决？

代码

  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);
            })();
        }

Source