Nachdem ich 25 Kreise an die Seite angehängt habe, führe ich die folgende Funktion aus:

var transitionPage = function () {
  startThePage();
  var height = $(document).height() - 20
    , width = $(document).width()
    ;

  d3.selectAll("circle")
    .transition().duration(2500)
      .style("fill", "steelblue")
      .attr("r", 15)
    .transition().duration(1000)
      .attr("cy", (height / 2))
    .each(function (d, i) {
      d3.select(this)
        .transition().duration(1000)
        .attr("cx", 30 + (i * width / 25));
    });
}

Dies funktioniert gut und richtet sie korrekt horizontal in der Mitte der Seite aus.

Ich konnte jedoch nicht herausfinden, wie man dann jeden Kreis in ein Quadrat oder ein Rechteck umwandelt.

Wie soll ich dieses Problem angehen?