Expose d3.tween. Fixes #747.

This is a little bit more verbose, but it avoids additional optional arguments on transition.{attr,style}.
d3 · Aug 9, 2012 · 2d9fe17 · 2d9fe17
1 parent 79a3c0d
commit 2d9fe17
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 66 deletions.
diff --git a/Makefile b/Makefile
@@ -119,6 +119,7 @@ d3.core.js: \
 	src/core/transition-duration.js \
 	src/core/transition-each.js \
 	src/core/transition-transition.js \
+	src/core/tween.js \
 	src/core/timer.js \
 	src/core/mouse.js \
 	src/core/touches.js \

diff --git a/d3.v2.js b/d3.v2.js
@@ -1776,20 +1776,6 @@
     }, 0, time);
     return groups;
   }
-  var d3_transitionRemove = {};
-  function d3_transitionNull(d, i, a) {
-    return a != "" && d3_transitionRemove;
-  }
-  function d3_transitionTween(interpolate, b) {
-    function transitionFunction(d, i, a) {
-      var v = b.call(this, d, i);
-      return v == null ? a != "" && d3_transitionRemove : a != v && interpolate(a, v);
-    }
-    function transitionString(d, i, a) {
-      return a != b && interpolate(a, b);
-    }
-    return typeof b === "function" ? transitionFunction : b == null ? d3_transitionNull : (b += "", transitionString);
-  }
   var d3_transitionPrototype = [], d3_transitionNextId = 0, d3_transitionId = 0, d3_transitionDefaultDelay = 0, d3_transitionDefaultDuration = 250, d3_transitionDefaultEase = d3.ease("cubic-in-out"), d3_transitionDelay = d3_transitionDefaultDelay, d3_transitionDuration = d3_transitionDefaultDuration, d3_transitionEase = d3_transitionDefaultEase;
   d3_transitionPrototype.call = d3_selectionPrototype.call;
   d3.transition = function(selection) {
@@ -1849,36 +1835,34 @@
     }
     return d3_transition(subgroups, this.id, this.time).ease(this.ease());
   };
-  d3_transitionPrototype.attr = function(name, value, interpolate) {
-    if (arguments.length < 3) interpolate = d3_interpolateByName(name);
-    return this.attrTween(name, d3_transitionTween(interpolate, value));
+  d3_transitionPrototype.attr = function(name, value) {
+    return this.attrTween(name, d3.tween(value, d3_interpolateByName(name)));
   };
   d3_transitionPrototype.attrTween = function(nameNS, tween) {
     var name = d3.ns.qualify(nameNS);
     function attrTween(d, i) {
       var f = tween.call(this, d, i, this.getAttribute(name));
-      return f === d3_transitionRemove ? (this.removeAttribute(name), null) : f && function(t) {
+      return f === d3_tweenRemove ? (this.removeAttribute(name), null) : f && function(t) {
         this.setAttribute(name, f(t));
       };
     }
     function attrTweenNS(d, i) {
       var f = tween.call(this, d, i, this.getAttributeNS(name.space, name.local));
-      return f === d3_transitionRemove ? (this.removeAttributeNS(name.space, name.local), null) : f && function(t) {
+      return f === d3_tweenRemove ? (this.removeAttributeNS(name.space, name.local), null) : f && function(t) {
         this.setAttributeNS(name.space, name.local, f(t));
       };
     }
     return this.tween("attr." + nameNS, name.local ? attrTweenNS : attrTween);
   };
-  d3_transitionPrototype.style = function(name, value, priority, interpolate) {
-    var n = arguments.length;
-    if (n < 3) interpolate = d3_interpolateByName(name), priority = ""; else if (typeof priority === "function") interpolate = priority, priority = ""; else interpolate = d3_interpolateByName(name);
-    return this.styleTween(name, d3_transitionTween(interpolate, value), priority);
+  d3_transitionPrototype.style = function(name, value, priority) {
+    if (arguments.length < 3) priority = "";
+    return this.styleTween(name, d3.tween(value, d3_interpolateByName(name)), priority);
   };
   d3_transitionPrototype.styleTween = function(name, tween, priority) {
     if (arguments.length < 3) priority = "";
     return this.tween("style." + name, function(d, i) {
       var f = tween.call(this, d, i, window.getComputedStyle(this, null).getPropertyValue(name));
-      return f === d3_transitionRemove ? (this.style.removeProperty(name), null) : f && function(t) {
+      return f === d3_tweenRemove ? (this.style.removeProperty(name), null) : f && function(t) {
         this.style.setProperty(name, f(t), priority);
       };
     });
@@ -1926,6 +1910,20 @@
   d3_transitionPrototype.transition = function() {
     return this.select(d3_this);
   };
+  d3.tween = function(b, interpolate) {
+    function tweenFunction(d, i, a) {
+      var v = b.call(this, d, i);
+      return v == null ? a != "" && d3_tweenRemove : a != v && interpolate(a, v);
+    }
+    function tweenString(d, i, a) {
+      return a != b && interpolate(a, b);
+    }
+    return typeof b === "function" ? tweenFunction : b == null ? d3_tweenNull : (b += "", tweenString);
+  };
+  var d3_tweenRemove = {};
+  function d3_tweenNull(d, i, a) {
+    return a != "" && d3_tweenRemove;
+  }
   var d3_timer_queue = null, d3_timer_interval, d3_timer_timeout;
   d3.timer = function(callback, delay, then) {
     var found = false, t0, t1 = d3_timer_queue;

diff --git a/d3.v2.min.js b/d3.v2.min.js
diff --git a/examples/transform/null-matrix.html b/examples/transform/null-matrix.html
@@ -20,6 +20,6 @@
 
 g.transition()
     .duration(3000)
-    .attr("transform", "matrix(1 0 0 1 100 100)rotate(360)", d3.interpolateString);
+    .attrTween("transform", d3.tween("matrix(1 0 0 1 100 100)rotate(360)", d3.interpolateString));
 
 </script>
diff --git a/examples/transform/null.html b/examples/transform/null.html
@@ -20,6 +20,6 @@
 
 g.transition()
     .duration(3000)
-    .attr("transform", "translate(100,100)rotate(360)", d3.interpolateString);
+    .attrTween("transform", d3.tween("translate(100,100)rotate(360)", d3.interpolateString));
 
 </script>
diff --git a/src/core/transition-attr.js b/src/core/transition-attr.js
@@ -1,21 +1,20 @@
-d3_transitionPrototype.attr = function(name, value, interpolate) {
-  if (arguments.length < 3) interpolate = d3_interpolateByName(name);
-  return this.attrTween(name, d3_transitionTween(interpolate, value));
+d3_transitionPrototype.attr = function(name, value) {
+  return this.attrTween(name, d3.tween(value, d3_interpolateByName(name)));
 };
 
 d3_transitionPrototype.attrTween = function(nameNS, tween) {
   var name = d3.ns.qualify(nameNS);
 
   function attrTween(d, i) {
     var f = tween.call(this, d, i, this.getAttribute(name));
-    return f === d3_transitionRemove
+    return f === d3_tweenRemove
         ? (this.removeAttribute(name), null)
         : f && function(t) { this.setAttribute(name, f(t)); };
   }
 
   function attrTweenNS(d, i) {
     var f = tween.call(this, d, i, this.getAttributeNS(name.space, name.local));
-    return f === d3_transitionRemove
+    return f === d3_tweenRemove
         ? (this.removeAttributeNS(name.space, name.local), null)
         : f && function(t) { this.setAttributeNS(name.space, name.local, f(t)); };
   }

diff --git a/src/core/transition-style.js b/src/core/transition-style.js
@@ -1,16 +1,13 @@
-d3_transitionPrototype.style = function(name, value, priority, interpolate) {
-  var n = arguments.length;
-  if (n < 3) interpolate = d3_interpolateByName(name), priority = "";
-  else if (typeof priority === "function") interpolate = priority, priority = "";
-  else interpolate = d3_interpolateByName(name);
-  return this.styleTween(name, d3_transitionTween(interpolate, value), priority);
+d3_transitionPrototype.style = function(name, value, priority) {
+  if (arguments.length < 3) priority = "";
+  return this.styleTween(name, d3.tween(value, d3_interpolateByName(name)), priority);
 };
 
 d3_transitionPrototype.styleTween = function(name, tween, priority) {
   if (arguments.length < 3) priority = "";
   return this.tween("style." + name, function(d, i) {
     var f = tween.call(this, d, i, window.getComputedStyle(this, null).getPropertyValue(name));
-    return f === d3_transitionRemove
+    return f === d3_tweenRemove
         ? (this.style.removeProperty(name), null)
         : f && function(t) { this.style.setProperty(name, f(t), priority); };
   });

diff --git a/src/core/transition.js b/src/core/transition.js
@@ -85,30 +85,6 @@ function d3_transition(groups, id, time) {
   return groups;
 }
 
-var d3_transitionRemove = {};
-
-function d3_transitionNull(d, i, a) {
-  return a != "" && d3_transitionRemove;
-}
-
-function d3_transitionTween(interpolate, b) {
-
-  function transitionFunction(d, i, a) {
-    var v = b.call(this, d, i);
-    return v == null
-        ? a != "" && d3_transitionRemove
-        : a != v && interpolate(a, v);
-  }
-
-  function transitionString(d, i, a) {
-    return a != b && interpolate(a, b);
-  }
-
-  return typeof b === "function" ? transitionFunction
-      : b == null ? d3_transitionNull
-      : (b += "", transitionString);
-}
-
 var d3_transitionPrototype = [],
     d3_transitionNextId = 0,
     d3_transitionId = 0,

diff --git a/src/core/tween.js b/src/core/tween.js
@@ -0,0 +1,23 @@
+d3.tween = function(b, interpolate) {
+
+  function tweenFunction(d, i, a) {
+    var v = b.call(this, d, i);
+    return v == null
+        ? a != "" && d3_tweenRemove
+        : a != v && interpolate(a, v);
+  }
+
+  function tweenString(d, i, a) {
+    return a != b && interpolate(a, b);
+  }
+
+  return typeof b === "function" ? tweenFunction
+      : b == null ? d3_tweenNull
+      : (b += "", tweenString);
+};
+
+var d3_tweenRemove = {};
+
+function d3_tweenNull(d, i, a) {
+  return a != "" && d3_tweenRemove;
+}