D3 SVG rotation conversion behaving strangely

Question

I created an SVG geometric pattern with D3 and I wanted to bring it to life. I wanted circles and squares to rotate around their center. However, when they rotate, the center point moves along the elliptical path before returning to the correct position.

My codepen is here: http://codepen.io/andybarefoot/pen/bwkjaN Pressing "spin" in the upper left corner shows unusual behavior. My key function for rotating a “group” is like this:

    function spinCircles() {
        d3
            .select("#fixedGroup")
            .attr("transform", "translate (0, 0) rotate(0)")
            .transition()
            .duration(4000)
            .attr("transform", function(d, i){
                return "translate (0, 0) rotate (90,"+m/2+","+m/2+")";
            })
        ;
    }

I suspect complexity is due to the fact that I have nested SVG elements with different viewports because I wanted my SVG to be responsive. (You can resize the window and the diagonal lines will change the angle to continue aligning with the corners of the screen, while the circles and square keep the same aspect ratio.)

The code for nested SVGs is as follows:

        var baseSVG = d3.select("body")
            .append("svg")
            .attr("id", "baseSVG")
        ;
        var stretchSVG = baseSVG
            .append("svg")
            .attr("id", "stretchSVG")
            .attr("viewBox", "0 0 " + w + " " + h)
            .attr("preserveAspectRatio", "none")
        ;
        var fixedSVG = baseSVG
            .append("svg")
            .attr("id", "fixedSVG")
            .attr("viewBox", "0 0 " + m + " " + m)
        ;

However, I am also open to the flaw that lies with my lousy understanding of transfer transitions to d3 ...

Any help is greatly appreciated!

Answer 1

D3 , tween, -:

function spinCircles() {
  d3
    .selectAll("#fixedGroup")
    .transition()
    .duration(4000)
    .attrTween("transform", function() {
      var center = "" + m/2 + "," +  m/2;
      return d3.interpolateString("rotate(0," + center + ")", "rotate(90," + center + ")");
    });
} 

.