Как превратить круг в квадрат с помощью d3.js

После добавления 25 страниц на страницу я запускаю следующую функцию:

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

Это работает хорошо и правильно выравнивает их по горизонтали вдоль середины страницы.

Однако я не мог понять, как затем преобразовать каждый круг в квадрат или прямоугольник.

Как мне подойти к этой проблеме?