After appending 25 circles to the page, I run the following function:
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));
});
}
This works well and correctly lines them up horizontally along the middle of the page.
However, I couldn't figure out how to then transform each circle into a square or rectangle.
How should I approach this problem?
See Question&Answers more detail:os