Skip to content

Commit 0022fcb

Browse files
mbostockmbostock
committed
Namespaced transitions.
1 parent 9364923 commit 0022fcb

16 files changed

Lines changed: 126 additions & 107 deletions

‎d3.js‎

Lines changed: 58 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -746,11 +746,12 @@
746746
});
747747
};
748748
d3_selectionPrototype.remove = function() {
749-
return this.each(function() {
750-
var parent = this.parentNode;
751-
if (parent) parent.removeChild(this);
752-
});
749+
return this.each(d3_selectionRemove);
753750
};
751+
function d3_selectionRemove() {
752+
var parent = this.parentNode;
753+
if (parent) parent.removeChild(this);
754+
}
754755
d3_selectionPrototype.data = function(value, key) {
755756
var i = -1, n = this.length, group, node;
756757
if (!arguments.length) {
@@ -959,8 +960,8 @@
959960
return node;
960961
};
961962
}
962-
d3_selectionPrototype.transition = function() {
963-
var id = d3_transitionInheritId || ++d3_transitionId, subgroups = [], subgroup, node, transition = d3_transitionInherit || {
963+
d3_selectionPrototype.transition = function(name) {
964+
var id = d3_transitionInheritId || ++d3_transitionId, ns = d3_transitionNamespace(name), subgroups = [], subgroup, node, transition = d3_transitionInherit || {
964965
time: Date.now(),
965966
ease: d3_ease_cubicInOut,
966967
delay: 0,
@@ -969,19 +970,19 @@
969970
for (var j = -1, m = this.length; ++j < m; ) {
970971
subgroups.push(subgroup = []);
971972
for (var group = this[j], i = -1, n = group.length; ++i < n; ) {
972-
if (node = group[i]) d3_transitionNode(node, i, id, transition);
973+
if (node = group[i]) d3_transitionNode(node, i, ns, id, transition);
973974
subgroup.push(node);
974975
}
975976
}
976-
return d3_transition(subgroups, id);
977+
return d3_transition(subgroups, ns, id);
977978
};
978-
d3_selectionPrototype.interrupt = function() {
979-
return this.each(d3_selection_interrupt);
979+
d3_selectionPrototype.interrupt = function(name) {
980+
var ns = d3_transitionNamespace(name);
981+
return this.each(function() {
982+
var lock = this[ns];
983+
if (lock) ++lock.active;
984+
});
980985
};
981-
function d3_selection_interrupt() {
982-
var lock = this.__transition__;
983-
if (lock) ++lock.active;
984-
}
985986
d3.select = function(node) {
986987
var group = [ typeof node === "string" ? d3_select(node, d3_document) : node ];
987988
group.parentNode = d3_documentElement;
@@ -8352,8 +8353,9 @@
83528353
});
83538354
d3.svg.symbolTypes = d3_svg_symbols.keys();
83548355
var d3_svg_symbolSqrt3 = Math.sqrt(3), d3_svg_symbolTan30 = Math.tan(30 * d3_radians);
8355-
function d3_transition(groups, id) {
8356+
function d3_transition(groups, namespace, id) {
83568357
d3_subclass(groups, d3_transitionPrototype);
8358+
groups.namespace = namespace;
83578359
groups.id = id;
83588360
return groups;
83598361
}
@@ -8367,39 +8369,39 @@
83678369
};
83688370
d3.transition.prototype = d3_transitionPrototype;
83698371
d3_transitionPrototype.select = function(selector) {
8370-
var id = this.id, subgroups = [], subgroup, subnode, node;
8372+
var id = this.id, ns = this.namespace, subgroups = [], subgroup, subnode, node;
83718373
selector = d3_selection_selector(selector);
83728374
for (var j = -1, m = this.length; ++j < m; ) {
83738375
subgroups.push(subgroup = []);
83748376
for (var group = this[j], i = -1, n = group.length; ++i < n; ) {
83758377
if ((node = group[i]) && (subnode = selector.call(node, node.__data__, i, j))) {
83768378
if ("__data__" in node) subnode.__data__ = node.__data__;
8377-
d3_transitionNode(subnode, i, id, node.__transition__[id]);
8379+
d3_transitionNode(subnode, i, ns, id, node[ns][id]);
83788380
subgroup.push(subnode);
83798381
} else {
83808382
subgroup.push(null);
83818383
}
83828384
}
83838385
}
8384-
return d3_transition(subgroups, id);
8386+
return d3_transition(subgroups, ns, id);
83858387
};
83868388
d3_transitionPrototype.selectAll = function(selector) {
8387-
var id = this.id, subgroups = [], subgroup, subnodes, node, subnode, transition;
8389+
var id = this.id, ns = this.namespace, subgroups = [], subgroup, subnodes, node, subnode, transition;
83888390
selector = d3_selection_selectorAll(selector);
83898391
for (var j = -1, m = this.length; ++j < m; ) {
83908392
for (var group = this[j], i = -1, n = group.length; ++i < n; ) {
83918393
if (node = group[i]) {
8392-
transition = node.__transition__[id];
8394+
transition = node[ns][id];
83938395
subnodes = selector.call(node, node.__data__, i, j);
83948396
subgroups.push(subgroup = []);
83958397
for (var k = -1, o = subnodes.length; ++k < o; ) {
8396-
if (subnode = subnodes[k]) d3_transitionNode(subnode, k, id, transition);
8398+
if (subnode = subnodes[k]) d3_transitionNode(subnode, k, ns, id, transition);
83978399
subgroup.push(subnode);
83988400
}
83998401
}
84008402
}
84018403
}
8402-
return d3_transition(subgroups, id);
8404+
return d3_transition(subgroups, ns, id);
84038405
};
84048406
d3_transitionPrototype.filter = function(filter) {
84058407
var subgroups = [], subgroup, group, node;
@@ -8412,23 +8414,23 @@
84128414
}
84138415
}
84148416
}
8415-
return d3_transition(subgroups, this.id);
8417+
return d3_transition(subgroups, this.namespace, this.id);
84168418
};
84178419
d3_transitionPrototype.tween = function(name, tween) {
8418-
var id = this.id;
8419-
if (arguments.length < 2) return this.node().__transition__[id].tween.get(name);
8420+
var id = this.id, ns = this.namespace;
8421+
if (arguments.length < 2) return this.node()[ns][id].tween.get(name);
84208422
return d3_selection_each(this, tween == null ? function(node) {
8421-
node.__transition__[id].tween.remove(name);
8423+
node[ns][id].tween.remove(name);
84228424
} : function(node) {
8423-
node.__transition__[id].tween.set(name, tween);
8425+
node[ns][id].tween.set(name, tween);
84248426
});
84258427
};
84268428
function d3_transition_tween(groups, name, value, tween) {
8427-
var id = groups.id;
8429+
var id = groups.id, ns = groups.namespace;
84288430
return d3_selection_each(groups, typeof value === "function" ? function(node, i, j) {
8429-
node.__transition__[id].tween.set(name, tween(value.call(node, node.__data__, i, j)));
8431+
node[ns][id].tween.set(name, tween(value.call(node, node.__data__, i, j)));
84308432
} : (value = tween(value), function(node) {
8431-
node.__transition__[id].tween.set(name, value);
8433+
node[ns][id].tween.set(name, value);
84328434
}));
84338435
}
84348436
d3_transitionPrototype.attr = function(nameNS, value) {
@@ -8520,73 +8522,77 @@
85208522
};
85218523
}
85228524
d3_transitionPrototype.remove = function() {
8525+
var ns = this.namespace;
85238526
return this.each("end.transition", function() {
85248527
var p;
8525-
if (this.__transition__.count < 2 && (p = this.parentNode)) p.removeChild(this);
8528+
if (this[ns].count < 2 && (p = this.parentNode)) p.removeChild(this);
85268529
});
85278530
};
85288531
d3_transitionPrototype.ease = function(value) {
8529-
var id = this.id;
8530-
if (arguments.length < 1) return this.node().__transition__[id].ease;
8532+
var id = this.id, ns = this.namespace;
8533+
if (arguments.length < 1) return this.node()[ns][id].ease;
85318534
if (typeof value !== "function") value = d3.ease.apply(d3, arguments);
85328535
return d3_selection_each(this, function(node) {
8533-
node.__transition__[id].ease = value;
8536+
node[ns][id].ease = value;
85348537
});
85358538
};
85368539
d3_transitionPrototype.delay = function(value) {
8537-
var id = this.id;
8538-
if (arguments.length < 1) return this.node().__transition__[id].delay;
8540+
var id = this.id, ns = this.namespace;
8541+
if (arguments.length < 1) return this.node()[ns][id].delay;
85398542
return d3_selection_each(this, typeof value === "function" ? function(node, i, j) {
8540-
node.__transition__[id].delay = +value.call(node, node.__data__, i, j);
8543+
node[ns][id].delay = +value.call(node, node.__data__, i, j);
85418544
} : (value = +value, function(node) {
8542-
node.__transition__[id].delay = value;
8545+
node[ns][id].delay = value;
85438546
}));
85448547
};
85458548
d3_transitionPrototype.duration = function(value) {
8546-
var id = this.id;
8547-
if (arguments.length < 1) return this.node().__transition__[id].duration;
8549+
var id = this.id, ns = this.namespace;
8550+
if (arguments.length < 1) return this.node()[ns][id].duration;
85488551
return d3_selection_each(this, typeof value === "function" ? function(node, i, j) {
8549-
node.__transition__[id].duration = Math.max(1, value.call(node, node.__data__, i, j));
8552+
node[ns][id].duration = Math.max(1, value.call(node, node.__data__, i, j));
85508553
} : (value = Math.max(1, value), function(node) {
8551-
node.__transition__[id].duration = value;
8554+
node[ns][id].duration = value;
85528555
}));
85538556
};
85548557
d3_transitionPrototype.each = function(type, listener) {
8555-
var id = this.id;
8558+
var id = this.id, ns = this.namespace;
85568559
if (arguments.length < 2) {
85578560
var inherit = d3_transitionInherit, inheritId = d3_transitionInheritId;
85588561
d3_transitionInheritId = id;
85598562
d3_selection_each(this, function(node, i, j) {
8560-
d3_transitionInherit = node.__transition__[id];
8563+
d3_transitionInherit = node[ns][id];
85618564
type.call(node, node.__data__, i, j);
85628565
});
85638566
d3_transitionInherit = inherit;
85648567
d3_transitionInheritId = inheritId;
85658568
} else {
85668569
d3_selection_each(this, function(node) {
8567-
var transition = node.__transition__[id];
8570+
var transition = node[ns][id];
85688571
(transition.event || (transition.event = d3.dispatch("start", "end"))).on(type, listener);
85698572
});
85708573
}
85718574
return this;
85728575
};
85738576
d3_transitionPrototype.transition = function() {
8574-
var id0 = this.id, id1 = ++d3_transitionId, subgroups = [], subgroup, group, node, transition;
8577+
var id0 = this.id, id1 = ++d3_transitionId, ns = this.namespace, subgroups = [], subgroup, group, node, transition;
85758578
for (var j = 0, m = this.length; j < m; j++) {
85768579
subgroups.push(subgroup = []);
85778580
for (var group = this[j], i = 0, n = group.length; i < n; i++) {
85788581
if (node = group[i]) {
8579-
transition = Object.create(node.__transition__[id0]);
8582+
transition = Object.create(node[ns][id0]);
85808583
transition.delay += transition.duration;
8581-
d3_transitionNode(node, i, id1, transition);
8584+
d3_transitionNode(node, i, ns, id1, transition);
85828585
}
85838586
subgroup.push(node);
85848587
}
85858588
}
8586-
return d3_transition(subgroups, id1);
8589+
return d3_transition(subgroups, ns, id1);
85878590
};
8588-
function d3_transitionNode(node, i, id, inherit) {
8589-
var lock = node.__transition__ || (node.__transition__ = {
8591+
function d3_transitionNamespace(name) {
8592+
return name == null ? "__transition__" : "__transition_" + name + "__";
8593+
}
8594+
function d3_transitionNode(node, i, namespace, id, inherit) {
8595+
var lock = node[namespace] || (node[namespace] = {
85908596
active: 0,
85918597
count: 0
85928598
}), transition = lock[id];
@@ -8631,7 +8637,7 @@
86318637
}
86328638
}
86338639
function stop() {
8634-
if (--lock.count) delete lock[id]; else delete node.__transition__;
8640+
if (--lock.count) delete lock[id]; else delete node[namespace];
86358641
return 1;
86368642
}
86378643
}, 0, time);

‎d3.min.js‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/selection/interrupt.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
// import "../transition/transition";
22
import "selection";
33

4-
d3_selectionPrototype.interrupt = function() {
5-
return this.each(d3_selection_interrupt);
4+
// TODO Interrupt transitions for all namespaces?
5+
d3_selectionPrototype.interrupt = function(name) {
6+
var ns = d3_transitionNamespace(name);
7+
return this.each(function() {
8+
var lock = this[ns];
9+
if (lock) ++lock.active;
10+
});
611
};
7-
8-
function d3_selection_interrupt() {
9-
var lock = this.__transition__;
10-
if (lock) ++lock.active;
11-
}

‎src/selection/remove.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ import "selection";
44
// TODO remove(node)?
55
// TODO remove(function)?
66
d3_selectionPrototype.remove = function() {
7-
return this.each(function() {
8-
var parent = this.parentNode;
9-
if (parent) parent.removeChild(this);
10-
});
7+
return this.each(d3_selectionRemove);
118
};
9+
10+
function d3_selectionRemove() {
11+
var parent = this.parentNode;
12+
if (parent) parent.removeChild(this);
13+
}

‎src/selection/transition.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
// import "../transition/transition";
22
import "selection";
33

4-
d3_selectionPrototype.transition = function() {
4+
d3_selectionPrototype.transition = function(name) {
55
var id = d3_transitionInheritId || ++d3_transitionId,
6+
ns = d3_transitionNamespace(name),
67
subgroups = [],
78
subgroup,
89
node,
@@ -11,10 +12,10 @@ d3_selectionPrototype.transition = function() {
1112
for (var j = -1, m = this.length; ++j < m;) {
1213
subgroups.push(subgroup = []);
1314
for (var group = this[j], i = -1, n = group.length; ++i < n;) {
14-
if (node = group[i]) d3_transitionNode(node, i, id, transition);
15+
if (node = group[i]) d3_transitionNode(node, i, ns, id, transition);
1516
subgroup.push(node);
1617
}
1718
}
1819

19-
return d3_transition(subgroups, id);
20+
return d3_transition(subgroups, ns, id);
2021
};

‎src/transition/delay.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import "../selection/each";
22
import "transition";
33

44
d3_transitionPrototype.delay = function(value) {
5-
var id = this.id;
6-
if (arguments.length < 1) return this.node().__transition__[id].delay;
5+
var id = this.id, ns = this.namespace;
6+
if (arguments.length < 1) return this.node()[ns][id].delay;
77
return d3_selection_each(this, typeof value === "function"
8-
? function(node, i, j) { node.__transition__[id].delay = +value.call(node, node.__data__, i, j); }
9-
: (value = +value, function(node) { node.__transition__[id].delay = value; }));
8+
? function(node, i, j) { node[ns][id].delay = +value.call(node, node.__data__, i, j); }
9+
: (value = +value, function(node) { node[ns][id].delay = value; }));
1010
};

‎src/transition/duration.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import "../selection/each";
22
import "transition";
33

44
d3_transitionPrototype.duration = function(value) {
5-
var id = this.id;
6-
if (arguments.length < 1) return this.node().__transition__[id].duration;
5+
var id = this.id, ns = this.namespace;
6+
if (arguments.length < 1) return this.node()[ns][id].duration;
77
return d3_selection_each(this, typeof value === "function"
8-
? function(node, i, j) { node.__transition__[id].duration = Math.max(1, value.call(node, node.__data__, i, j)); }
9-
: (value = Math.max(1, value), function(node) { node.__transition__[id].duration = value; }));
8+
? function(node, i, j) { node[ns][id].duration = Math.max(1, value.call(node, node.__data__, i, j)); }
9+
: (value = Math.max(1, value), function(node) { node[ns][id].duration = value; }));
1010
};

‎src/transition/each.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,20 @@ import "../selection/each";
22
import "transition";
33

44
d3_transitionPrototype.each = function(type, listener) {
5-
var id = this.id;
5+
var id = this.id, ns = this.namespace;
66
if (arguments.length < 2) {
77
var inherit = d3_transitionInherit,
88
inheritId = d3_transitionInheritId;
99
d3_transitionInheritId = id;
1010
d3_selection_each(this, function(node, i, j) {
11-
d3_transitionInherit = node.__transition__[id];
11+
d3_transitionInherit = node[ns][id];
1212
type.call(node, node.__data__, i, j);
1313
});
1414
d3_transitionInherit = inherit;
1515
d3_transitionInheritId = inheritId;
1616
} else {
1717
d3_selection_each(this, function(node) {
18-
var transition = node.__transition__[id];
18+
var transition = node[ns][id];
1919
(transition.event || (transition.event = d3.dispatch("start", "end"))).on(type, listener);
2020
});
2121
}

‎src/transition/ease.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import "../selection/each";
33
import "transition";
44

55
d3_transitionPrototype.ease = function(value) {
6-
var id = this.id;
7-
if (arguments.length < 1) return this.node().__transition__[id].ease;
6+
var id = this.id, ns = this.namespace;
7+
if (arguments.length < 1) return this.node()[ns][id].ease;
88
if (typeof value !== "function") value = d3.ease.apply(d3, arguments);
9-
return d3_selection_each(this, function(node) { node.__transition__[id].ease = value; });
9+
return d3_selection_each(this, function(node) { node[ns][id].ease = value; });
1010
};

‎src/transition/filter.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,5 @@ d3_transitionPrototype.filter = function(filter) {
1818
}
1919
}
2020

21-
return d3_transition(subgroups, this.id);
21+
return d3_transition(subgroups, this.namespace, this.id);
2222
};

0 commit comments

Comments
 (0)