Перемещение фигур вверх и вниз в сетке

Question

У меня есть сетка кругов, которые я хочу перемещать вверх и вниз (см. Рисунок слева). Тем не менее, мой код заставляет круги сгущаться к вершине, и этот ряд перемещается вверх и вниз (см. Рисунок справа). Как мне исправить?

Код

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

Источник