Merge branch 'transition-null' of https://github.com/jasondavies/d3 into release

Conflicts:
	test/core/transition-test-attr.js

d3.js

@@ -1858,10 +1858,25 @@ function d3_transition(groups, id) {
   return groups;
 }
 
+var d3_transitionRemove = {};
+
+function d3_transitionNull(d, i, a) {
+  return a != "" && d3_transitionRemove;
+}
+
 function d3_transitionTween(b) {
-  return typeof b === "function"
+  function transitionFunction(d, i, a) {
-      ? function(d, i, a) { var v = b.call(this, d, i) + ""; return a != v && d3.interpolate(a, v); }
+    var v = b.call(this, d, i);
-      : (b = b + "", function(d, i, a) { return a != b && d3.interpolate(a, b); });
+    return v == null
+        ? a != "" && d3_transitionRemove
+        : a != v && d3.interpolate(a, v);
+  }
+  function transitionString(d, i, a) {
+    return a != b && d3.interpolate(a, b);
+  }
+  return typeof b === "function" ? transitionFunction
+      : b == null ? d3_transitionNull
+      : (b += "", transitionString);
 }
 
 var d3_transitionPrototype = [],
@@ -1924,24 +1939,24 @@ d3_transitionPrototype.attr = function(name, value) {
   return this.attrTween(name, d3_transitionTween(value));
 };
 
-d3_transitionPrototype.attrTween = function(name, tween) {
+d3_transitionPrototype.attrTween = function(nameNS, tween) {
-  name = d3.ns.qualify(name);
+  var name = d3.ns.qualify(nameNS);
 
   function attrTween(d, i) {
     var f = tween.call(this, d, i, this.getAttribute(name));
-    return f && function(t) {
+    return f === d3_transitionRemove
-      this.setAttribute(name, f(t));
+      ? (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 && function(t) {
+    return f === d3_transitionRemove
-      this.setAttributeNS(name.space, name.local, f(t));
+      ? (this.removeAttributeNS(name.space, name.local), null)
-    };
+      : f && function(t) { this.setAttributeNS(name.space, name.local, f(t)); };
   }
 
-  return this.tween("attr." + name, name.local ? attrTweenNS : attrTween);
+  return this.tween("attr." + nameNS, name.local ? attrTweenNS : attrTween);
 };
 d3_transitionPrototype.style = function(name, value, priority) {
   if (arguments.length < 3) priority = "";
@@ -1952,9 +1967,9 @@ 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 && function(t) {
+    return f === d3_transitionRemove
-      this.style.setProperty(name, f(t), priority);
+      ? (this.style.removeProperty(name), null)
-    };
+      : f && function(t) { this.style.setProperty(name, f(t), priority); };
   });
 };
 d3_transitionPrototype.text = function(value) {

src/core/transition-attr.js

@@ -2,22 +2,22 @@ d3_transitionPrototype.attr = function(name, value) {
   return this.attrTween(name, d3_transitionTween(value));
 };
 
-d3_transitionPrototype.attrTween = function(name, tween) {
+d3_transitionPrototype.attrTween = function(nameNS, tween) {
-  name = d3.ns.qualify(name);
+  var name = d3.ns.qualify(nameNS);
 
   function attrTween(d, i) {
     var f = tween.call(this, d, i, this.getAttribute(name));
-    return f && function(t) {
+    return f === d3_transitionRemove
-      this.setAttribute(name, f(t));
+      ? (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 && function(t) {
+    return f === d3_transitionRemove
-      this.setAttributeNS(name.space, name.local, f(t));
+      ? (this.removeAttributeNS(name.space, name.local), null)
-    };
+      : f && function(t) { this.setAttributeNS(name.space, name.local, f(t)); };
   }
 
-  return this.tween("attr." + name, name.local ? attrTweenNS : attrTween);
+  return this.tween("attr." + nameNS, name.local ? attrTweenNS : attrTween);
 };

src/core/transition-style.js

@@ -7,8 +7,8 @@ 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 && function(t) {
+    return f === d3_transitionRemove
-      this.style.setProperty(name, f(t), priority);
+      ? (this.style.removeProperty(name), null)
-    };
+      : f && function(t) { this.style.setProperty(name, f(t), priority); };
   });
 };

src/core/transition.js

@@ -85,10 +85,25 @@ function d3_transition(groups, id) {
   return groups;
 }
 
+var d3_transitionRemove = {};
+
+function d3_transitionNull(d, i, a) {
+  return a != "" && d3_transitionRemove;
+}
+
 function d3_transitionTween(b) {
-  return typeof b === "function"
+  function transitionFunction(d, i, a) {
-      ? function(d, i, a) { var v = b.call(this, d, i) + ""; return a != v && d3.interpolate(a, v); }
+    var v = b.call(this, d, i);
-      : (b = b + "", function(d, i, a) { return a != b && d3.interpolate(a, b); });
+    return v == null
+        ? a != "" && d3_transitionRemove
+        : a != v && d3.interpolate(a, v);
+  }
+  function transitionString(d, i, a) {
+    return a != b && d3.interpolate(a, b);
+  }
+  return typeof b === "function" ? transitionFunction
+      : b == null ? d3_transitionNull
+      : (b += "", transitionString);
 }
 
 var d3_transitionPrototype = [],

test/core/transition-test-attr.js

@@ -8,13 +8,22 @@ module.exports = {
     var cb = this.callback;
 
     var s = d3.select("body").append("div")
+        .attr("display", "none")
+        .attr("font-size", "20px")
         .attr("width", 20)
-        .attr("color", "red");
+        .attr("color", "red")
+        .attr("xlink:type", "simple")
+        .attr("xlink:href", "http://mbostock.github.com/d3/");
 
     var t = s.transition()
+        .attr("display", null)
+        .attr("font-size", function() { return null; })
+        .attr("display", null)
         .attr("width", 100)
         .attr("width", 200)
         .attr("color", function() { return "green"; })
+        .attr("xlink:href", null)
+        .attr("xlink:type", function() { return null; })
         .each("end", function() { cb(null, {selection: s, transition: t}); });
   },
   "defines the corresponding attr tween": function(result) {
@@ -29,5 +38,17 @@ module.exports = {
   },
   "sets an attribute as a function": function(result) {
     assert.equal(result.selection.attr("color"), "#008000");
+  },
+  "removes an attribute using a constant null": function(result) {
+    assert.equal(result.selection.attr("display"), "");
+  },
+  "removes an attribute using a function null": function(result) {
+    assert.equal(result.selection.attr("font-size"), "");
+  },
+  "removes a namespaced attribute using a constant null": function(result) {
+    assert.equal(result.selection.attr("xlink:href"), "");
+  },
+  "removes a namespaced attribute using a function null": function(result) {
+    assert.equal(result.selection.attr("xlink:type"), "");
   }
 };

test/core/transition-test-style.js

@@ -9,9 +9,14 @@ module.exports = {
 
     var s = d3.select("body").append("div")
         .style("background-color", "white")
-        .style("color", "red");
+        .style("color", "red")
+        .style("display", "none")
+        .style("font-size", "20px");
 
     var t = s.transition()
+        .style("display", null)
+        .style("font-size", function() { return null; })
+        .style("display", null)
         .style("background-color", "green")
         .style("background-color", "red")
         .style("color", function() { return "green"; }, "important")
@@ -34,5 +39,11 @@ module.exports = {
     var style = result.selection.node().style;
     assert.equal(style.getPropertyPriority("background-color"), "");
     assert.equal(style.getPropertyPriority("color"), "important");
+  },
+  "removes a property using a constant null": function(result) {
+    assert.equal(result.selection.style("display"), "");
+  },
+  "removes a property using a function null": function(result) {
+    assert.equal(result.selection.style("font-size"), "");
   }
 };