Better interruption semantics.

When a transition is interrupted, the interrupt event is dispatched immediately
(such as within a call to selection.interrupt). This is easier to understand and
guarantees that the interrupt event on an interrupted transition is dispatched
prior to the start event on an interrupting transition, fixing #2140.

Calling selection.interrupt repeatedly no longer cancels any scheduled (but
inactive) transitions, fixing #2141. Calling selection.interrupt when there is
no active transition now has no effect.

An interrupt event is only dispatched if the active transition is interrupted,
and not if a scheduled transition was cancelled, as when a delayed transition is
superceded by an earlier transition on the same element. These transitions are
cancelled silently, fixing #2144.

Lastly, transition event listeners now see the latest bound data, rather than
using the data that was captured shortly after the transition was scheduled.
Fixes #2142.

d3.js

@@ -989,33 +989,6 @@
       return node;
     };
   }
-  d3_selectionPrototype.transition = function(name) {
-    var id = d3_transitionInheritId || ++d3_transitionId, ns = d3_transitionNamespace(name), subgroups = [], subgroup, node, transition = d3_transitionInherit || {
-      time: Date.now(),
-      ease: d3_ease_cubicInOut,
-      delay: 0,
-      duration: 250
-    };
-    for (var j = -1, m = this.length; ++j < m; ) {
-      subgroups.push(subgroup = []);
-      for (var group = this[j], i = -1, n = group.length; ++i < n; ) {
-        if (node = group[i]) d3_transitionNode(node, i, ns, id, transition);
-        subgroup.push(node);
-      }
-    }
-    return d3_transition(subgroups, ns, id);
-  };
-  d3_selectionPrototype.interrupt = function(name) {
-    var ns = d3_transitionNamespace(name);
-    return this.each(function() {
-      var lock = this[ns];
-      if (lock) ++lock.active;
-    });
-  };
-  function d3_selection_interrupt(that) {
-    var lock = that.__transition__;
-    if (lock) ++lock.active;
-  }
   d3.select = function(node) {
     var group = [ typeof node === "string" ? d3_select(node, d3_document) : node ];
     group.parentNode = d3_documentElement;
@@ -1425,7 +1398,7 @@
     }
     function mousedowned() {
       var that = this, target = d3.event.target, dispatch = event.of(that, arguments), dragged = 0, subject = d3.select(d3_window).on(mousemove, moved).on(mouseup, ended), location0 = location(d3.mouse(that)), dragRestore = d3_event_dragSuppress();
-      d3_selection_interrupt(that);
+      d3_selection_interrupt.call(that);
       zoomstarted(dispatch);
       function moved() {
         dragged = 1;
@@ -1474,7 +1447,7 @@
       }
       function moved() {
         var touches = d3.touches(that), p0, l0, p1, l1;
-        d3_selection_interrupt(that);
+        d3_selection_interrupt.call(that);
         for (var i = 0, n = touches.length; i < n; ++i, l1 = null) {
           p1 = touches[i];
           if (l1 = locations0[p1.identifier]) {
@@ -1511,7 +1484,7 @@
     function mousewheeled() {
       var dispatch = event.of(this, arguments);
       if (mousewheelTimer) clearTimeout(mousewheelTimer); else translate0 = location(center0 = center || d3.mouse(this)), 
-      d3_selection_interrupt(this), zoomstarted(dispatch);
+      d3_selection_interrupt.call(this), zoomstarted(dispatch);
       mousewheelTimer = setTimeout(function() {
         mousewheelTimer = null;
         zoomended(dispatch);
@@ -8553,9 +8526,43 @@
   });
   d3.svg.symbolTypes = d3_svg_symbols.keys();
   var d3_svg_symbolSqrt3 = Math.sqrt(3), d3_svg_symbolTan30 = Math.tan(30 * d3_radians);
-  function d3_transition(groups, namespace, id) {
+  d3_selectionPrototype.transition = function(name) {
+    var id = d3_transitionInheritId || ++d3_transitionId, ns = d3_transitionNamespace(name), subgroups = [], subgroup, node, transition = d3_transitionInherit || {
+      time: Date.now(),
+      ease: d3_ease_cubicInOut,
+      delay: 0,
+      duration: 250
+    };
+    for (var j = -1, m = this.length; ++j < m; ) {
+      subgroups.push(subgroup = []);
+      for (var group = this[j], i = -1, n = group.length; ++i < n; ) {
+        if (node = group[i]) d3_transitionNode(node, i, ns, id, transition);
+        subgroup.push(node);
+      }
+    }
+    return d3_transition(subgroups, ns, id);
+  };
+  d3_selectionPrototype.interrupt = function(name) {
+    return this.each(name == null ? d3_selection_interrupt : d3_selection_interruptNS(d3_transitionNamespace(name)));
+  };
+  var d3_selection_interrupt = d3_selection_interruptNS(d3_transitionNamespace());
+  function d3_selection_interruptNS(ns) {
+    return function() {
+      var lock, active;
+      if ((lock = this[ns]) && (active = lock[lock.active])) {
+        if (--lock.count) {
+          delete lock[lock.active];
+          lock.active += .5;
+        } else {
+          delete this[ns];
+        }
+        active.event && active.event.interrupt.call(this, this.__data__, active.index);
+      }
+    };
+  }
+  function d3_transition(groups, ns, id) {
     d3_subclass(groups, d3_transitionPrototype);
-    groups.namespace = namespace;
+    groups.namespace = ns;
     groups.id = id;
     return groups;
   }
@@ -8758,13 +8765,16 @@
     var id = this.id, ns = this.namespace;
     if (arguments.length < 2) {
       var inherit = d3_transitionInherit, inheritId = d3_transitionInheritId;
-      d3_transitionInheritId = id;
-      d3_selection_each(this, function(node, i, j) {
-        d3_transitionInherit = node[ns][id];
-        type.call(node, node.__data__, i, j);
-      });
-      d3_transitionInherit = inherit;
-      d3_transitionInheritId = inheritId;
+      try {
+        d3_transitionInheritId = id;
+        d3_selection_each(this, function(node, i, j) {
+          d3_transitionInherit = node[ns][id];
+          type.call(node, node.__data__, i, j);
+        });
+      } finally {
+        d3_transitionInherit = inherit;
+        d3_transitionInheritId = inheritId;
+      }
     } else {
       d3_selection_each(this, function(node) {
         var transition = node[ns][id];
@@ -8795,8 +8805,8 @@
   function d3_transitionNamespace(name) {
     return name == null ? "__transition__" : "__transition_" + name + "__";
   }
-  function d3_transitionNode(node, i, namespace, id, inherit) {
-    var lock = node[namespace] || (node[namespace] = {
+  function d3_transitionNode(node, i, ns, id, inherit) {
+    var lock = node[ns] || (node[ns] = {
       active: 0,
       count: 0
     }), transition = lock[id];
@@ -8807,21 +8817,28 @@
         time: time,
         delay: inherit.delay,
         duration: inherit.duration,
-        ease: inherit.ease
+        ease: inherit.ease,
+        index: i
       };
       inherit = null;
       ++lock.count;
       d3.timer(function(elapsed) {
-        var d = node.__data__, delay = transition.delay, duration, ease, timer = d3_timer_active, tweened = [];
+        var delay = transition.delay, duration, ease, timer = d3_timer_active, tweened = [];
         timer.t = delay + time;
         if (delay <= elapsed) return start(elapsed - delay);
         timer.c = start;
         function start(elapsed) {
-          if (lock.active > id) return stop(false);
+          if (lock.active > id) return stop();
+          var active = lock[lock.active];
+          if (active) {
+            --lock.count;
+            delete lock[lock.active];
+            active.event && active.event.interrupt.call(node, node.__data__, active.index);
+          }
           lock.active = id;
-          transition.event && transition.event.start.call(node, d, i);
+          transition.event && transition.event.start.call(node, node.__data__, i);
           transition.tween.forEach(function(key, value) {
-            if (value = value.call(node, d, i)) {
+            if (value = value.call(node, node.__data__, i)) {
               tweened.push(value);
             }
           });
@@ -8833,16 +8850,18 @@
           }, 0, time);
         }
         function tick(elapsed) {
-          if (lock.active !== id) return stop(false);
+          if (lock.active !== id) return 1;
           var t = elapsed / duration, e = ease(t), n = tweened.length;
           while (n > 0) {
             tweened[--n].call(node, e);
           }
-          if (t >= 1) return stop(true);
+          if (t >= 1) {
+            transition.event && transition.event.end.call(node, node.__data__, i);
+            return stop();
+          }
         }
-        function stop(end) {
-          if (transition.event) transition.event[end ? "end" : "interrupt"].call(node, d, i);
-          if (--lock.count) delete lock[id]; else delete node[namespace];
+        function stop() {
+          if (--lock.count) delete lock[id]; else delete node[ns];
           return 1;
         }
       }, 0, time);

src/behavior/zoom.js

@@ -187,7 +187,7 @@ d3.behavior.zoom = function() {
         location0 = location(d3.mouse(that)),
         dragRestore = d3_event_dragSuppress();
 
-    d3_selection_interrupt(that);
+    d3_selection_interrupt.call(that);
     zoomstarted(dispatch);
 
     function moved() {
@@ -270,7 +270,7 @@ d3.behavior.zoom = function() {
           p0, l0,
           p1, l1;
 
-      d3_selection_interrupt(that);
+      d3_selection_interrupt.call(that);
 
       for (var i = 0, n = touches.length; i < n; ++i, l1 = null) {
         p1 = touches[i];
@@ -318,7 +318,7 @@ d3.behavior.zoom = function() {
   function mousewheeled() {
     var dispatch = event.of(this, arguments);
     if (mousewheelTimer) clearTimeout(mousewheelTimer);
-    else translate0 = location(center0 = center || d3.mouse(this)), d3_selection_interrupt(this), zoomstarted(dispatch);
+    else translate0 = location(center0 = center || d3.mouse(this)), d3_selection_interrupt.call(this), zoomstarted(dispatch);
     mousewheelTimer = setTimeout(function() { mousewheelTimer = null; zoomended(dispatch); }, 50);
     d3_eventPreventDefault();
     scaleTo(Math.pow(2, d3_behavior_zoomDelta() * .002) * view.k);

src/selection/interrupt.js

@@ -3,14 +3,24 @@ import "selection";
 
 // TODO Interrupt transitions for all namespaces?
 d3_selectionPrototype.interrupt = function(name) {
-  var ns = d3_transitionNamespace(name);
-  return this.each(function() {
-    var lock = this[ns];
-    if (lock) ++lock.active;
-  });
+  return this.each(name == null
+      ? d3_selection_interrupt
+      : d3_selection_interruptNS(d3_transitionNamespace(name)));
 };
 
-function d3_selection_interrupt(that) {
-  var lock = that.__transition__;
-  if (lock) ++lock.active;
+var d3_selection_interrupt = d3_selection_interruptNS(d3_transitionNamespace());
+
+function d3_selection_interruptNS(ns) {
+  return function() {
+    var lock, active;
+    if ((lock = this[ns]) && (active = lock[lock.active])) {
+      if (--lock.count) {
+        delete lock[lock.active];
+        lock.active += .5;
+      } else {
+        delete this[ns];
+      }
+      active.event && active.event.interrupt.call(this, this.__data__, active.index);
+    }
+  };
 }

src/selection/selection.js

@@ -50,9 +50,6 @@ import "node";
 import "size";
 import "enter";
 
-import "transition";
-import "interrupt";
-
 // TODO fast singleton implementation?
 d3.select = function(node) {
   var group = [typeof node === "string" ? d3_select(node, d3_document) : node];

src/transition/each.js

@@ -6,13 +6,16 @@ d3_transitionPrototype.each = function(type, listener) {
   if (arguments.length < 2) {
     var inherit = d3_transitionInherit,
         inheritId = d3_transitionInheritId;
-    d3_transitionInheritId = id;
-    d3_selection_each(this, function(node, i, j) {
-      d3_transitionInherit = node[ns][id];
-      type.call(node, node.__data__, i, j);
-    });
-    d3_transitionInherit = inherit;
-    d3_transitionInheritId = inheritId;
+    try {
+      d3_transitionInheritId = id;
+      d3_selection_each(this, function(node, i, j) {
+        d3_transitionInherit = node[ns][id];
+        type.call(node, node.__data__, i, j);
+      });
+    } finally {
+      d3_transitionInherit = inherit;
+      d3_transitionInheritId = inheritId;
+    }
   } else {
     d3_selection_each(this, function(node) {
       var transition = node[ns][id];

src/transition/transition.js

@@ -4,12 +4,14 @@ import "../core/true";
 import "../event/dispatch";
 import "../event/timer";
 import "../selection/selection";
+import "../selection/transition";
+import "../selection/interrupt";
 
-function d3_transition(groups, namespace, id) {
+function d3_transition(groups, ns, id) {
   d3_subclass(groups, d3_transitionPrototype);
 
   // Note: read-only!
-  groups.namespace = namespace;
+  groups.namespace = ns;
   groups.id = id;
 
   return groups;
@@ -51,8 +53,8 @@ function d3_transitionNamespace(name) {
   return name == null ? "__transition__" : "__transition_" + name + "__";
 }
 
-function d3_transitionNode(node, i, namespace, id, inherit) {
-  var lock = node[namespace] || (node[namespace] = {active: 0, count: 0}),
+function d3_transitionNode(node, i, ns, id, inherit) {
+  var lock = node[ns] || (node[ns] = {active: 0, count: 0}),
       transition = lock[id];
 
   if (!transition) {
@@ -63,16 +65,16 @@ function d3_transitionNode(node, i, namespace, id, inherit) {
       time: time,
       delay: inherit.delay,
       duration: inherit.duration,
-      ease: inherit.ease
+      ease: inherit.ease,
+      index: i
     };
 
     inherit = null; // allow gc
 
     ++lock.count;
 
     d3.timer(function(elapsed) {
-      var d = node.__data__,
-          delay = transition.delay,
+      var delay = transition.delay,
           duration,
           ease,
           timer = d3_timer_active,
@@ -83,12 +85,21 @@ function d3_transitionNode(node, i, namespace, id, inherit) {
       timer.c = start;
 
       function start(elapsed) {
-        if (lock.active > id) return stop(false);
+        if (lock.active > id) return stop();
+
+        var active = lock[lock.active];
+        if (active) {
+          --lock.count;
+          delete lock[lock.active];
+          active.event && active.event.interrupt.call(node, node.__data__, active.index);
+        }
+
         lock.active = id;
-        transition.event && transition.event.start.call(node, d, i);
+
+        transition.event && transition.event.start.call(node, node.__data__, i);
 
         transition.tween.forEach(function(key, value) {
-          if (value = value.call(node, d, i)) {
+          if (value = value.call(node, node.__data__, i)) {
             tweened.push(value);
           }
         });
@@ -104,7 +115,7 @@ function d3_transitionNode(node, i, namespace, id, inherit) {
       }
 
       function tick(elapsed) {
-        if (lock.active !== id) return stop(false);
+        if (lock.active !== id) return 1;
 
         var t = elapsed / duration,
             e = ease(t),
@@ -114,13 +125,15 @@ function d3_transitionNode(node, i, namespace, id, inherit) {
           tweened[--n].call(node, e);
         }
 
-        if (t >= 1) return stop(true);
+        if (t >= 1) {
+          transition.event && transition.event.end.call(node, node.__data__, i);
+          return stop();
+        }
       }
 
-      function stop(end) {
-        if (transition.event) transition.event[end ? "end" : "interrupt"].call(node, d, i);
+      function stop() {
         if (--lock.count) delete lock[id];
-        else delete node[namespace];
+        else delete node[ns];
         return 1;
       }
     }, 0, time);