Cómo cambiar un círculo en un cuadrado con d3.js
Después de agregar 25 círculos a la página, ejecuto la siguiente función:
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));
});
}
Esto funciona bien y los alinea correctamente en forma horizontal a lo largo de la mitad de la página.
Sin embargo, no pude averiguar cómo transformar cada círculo en un cuadrado o rectángulo.
¿Cómo debo abordar este problema?