Ich habe mit D3 ein geometrisches SVG-Muster generiert und wollte es animieren. Ich wollte, dass sich die Kreise und Quadrate um ihre Mitte drehen. Wenn sie sich jedoch drehen, bewegt sich der Mittelpunkt entlang eines elliptischen Pfades, bevor er in die richtige Position zurückkehrt.

Mein Codepen ist hier:http: //codepen.io/andybarefoot/pen/bwkja Klicken auf "Drehen" in der oberen linken Ecke zeigt das ungewöhnliche Verhalten. Meine Schlüsselfunktion zum Drehen der "Gruppe" sieht folgendermaßen aus:

    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+")";
            })
        ;
    }

Ich vermute, die Komplexität ergibt sich aus der Tatsache, dass ich SVG-Elemente mit verschiedenen Ansichtsfeldern verschachtelt habe, da ich wollte, dass meine SVG "ansprechend" ist. (Sie können die Größe des Fensters ändern und die diagonalen Linien ändern den Winkel, um die Ausrichtung an den Ecken des Bildschirms fortzusetzen, während die Kreise und das Quadrat das gleiche Seitenverhältnis beibehalten.)

Der Code für die verschachtelten SVGs sieht folgendermaßen aus:

        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)
        ;

Jedoch bin ich auch offen für die Schuld, die an meinem miesen Verständnis der Transferübergänge in d3 liegt ...

Jede Hilfe sehr dankbar erhalten!