Use shortest path even for large angles.

d3 · Jul 31, 2012 · b4d7993 · b4d7993
1 parent 43360e4
commit b4d7993
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 11 deletions.
diff --git a/d3.v2.js b/d3.v2.js
@@ -878,8 +878,6 @@
         ta = a.getItem(i);
         tb = b.getItem(i);
         if ((type = ta.type) !== tb.type || type <= 1) return;
-        ra = ta.angle;
-        rb = tb.angle;
         switch (type) {
          case 2:
           {
@@ -895,9 +893,17 @@
           }
          case 4:
           {
+            ra = ta.angle % 360;
+            rb = tb.angle % 360;
             if (ra - rb > 180) rb += 360; else if (rb - ra > 180) ra += 360;
             break;
           }
+         default:
+          {
+            ra = ta.angle;
+            rb = tb.angle;
+            break;
+          }
         }
         sa.push(type = d3_interpolateTransformTypes[type], "(", ra, ")");
         sb.push(type, "(", rb, ")");

diff --git a/d3.v2.min.js b/d3.v2.min.js
diff --git a/examples/transform/test-rotate.html b/examples/transform/test-rotate.html
@@ -57,7 +57,8 @@
   {start: -180, end:   90, expected: [ 180.00,  157.50,  135.00,  112.50,   90.00]},
   {start:  180, end:   90, expected: [ 180.00,  157.50,  135.00,  112.50,   90.00]},
   {start: -180, end:  -90, expected: [-180.00, -157.50, -135.00, -112.50,  -90.00]},
-  {start:  180, end:  -90, expected: [ 180.00, -157.50, -135.00, -112.50,  -90.00]}
+  {start:  180, end:  -90, expected: [ 180.00, -157.50, -135.00, -112.50,  -90.00]},
+  {start:  780, end:  -90, expected: [  60.00,   22.50,  -15.00,  -52.50,  -90.00]}
 ];
 
 var tr = d3.select("tbody").selectAll("tr")
@@ -121,9 +122,8 @@
       .each("end", animateExpected);
 
   function rotateTween(d) {
-    var a = d.start, b = d.end;
-    if (a - b > 180) b += 360;
-    else if (b - a > 180) a += 360;
+    var a = d.start % 360, b = d.end % 360;
+    if (a - b > 180) b += 360; else if (b - a > 180) a += 360; // shortest path
     return d3.interpolateString("rotate(" + a + ")", "rotate(" + b + ")");
   }
 }

diff --git a/src/core/interpolate.js b/src/core/interpolate.js
@@ -179,8 +179,6 @@ var d3_interpolateTransformSimilar = function(a, b) {
       ta = a.getItem(i);
       tb = b.getItem(i);
       if ((type = ta.type) !== tb.type || type <= 1) return;
-      ra = ta.angle;
-      rb = tb.angle;
       switch (type) {
         case 2: {
           ra = ta.matrix.e + "," + ta.matrix.f;
@@ -193,9 +191,16 @@ var d3_interpolateTransformSimilar = function(a, b) {
           break;
         }
         case 4: {
+          ra = ta.angle % 360;
+          rb = tb.angle % 360;
           if (ra - rb > 180) rb += 360; else if (rb - ra > 180) ra += 360; // shortest path
           break;
         }
+        default: {
+          ra = ta.angle;
+          rb = tb.angle;
+          break;
+        }
       }
       sa.push(type = d3_interpolateTransformTypes[type], "(", ra, ")");
       sb.push(type, "(", rb, ")");