Como alterar um círculo em um quadrado com d3.js
Depois de acrescentar 25 círculos à página, executo a seguinte função:
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));
});
}
Isso funciona bem e corretamente alinha-os horizontalmente ao longo do meio da página.
No entanto, não consegui descobrir como transformar cada círculo em um quadrado ou retângulo.
Como devo abordar esse problema?