How to change a circle into a square with d3.js

After appending 25 circles to the page, I run the following function:

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

      .style("fill", "steelblue")
      .attr("r", 15)
      .attr("cy", (height / 2))
    .each(function (d, i) {
        .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?



In the svg recomendation there are no transformation possible for the circle shape to become a square. What you can try to do, and if you have control over this part, is to draw squares instead of circles and apply a border radius on it. Something like this:"body").select("svg").append("rect")

Then the transition from a circle to a square could be done as:"rect")


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.