Commit bef1ccb9 authored by Mike Bostock's avatar Mike Bostock
Browse files

Accept function for selection append and insert.

Like selection.select, selection.append and selection.insert can now accept a
function which returns a node. This makes it slightly easier to append or insert
elements whose name is computed from data, or to append elements that already
exist (say from an element pool).

There has been much discussion regarding whether the function should return the
name of the element or the element itself. Returning a name is less work for the
caller, but only supports creating new elements; returning a name is also more
consistent with how D3 defines attribute values, but D3 does not allow attribute
names to be specified as functions. So, it seemed better to opt for consistency
with selection.select and selection.selectAll, which accept functions that
return elements, since this is more expressive. Of course, you can still use
select and selectAll to append elements, but using append to do that directly is
more intuitive.

Related #4 #311 #724 #732 #734 #961 #1031 #1271.
parent 822e0af7
...@@ -484,7 +484,7 @@ d3 = function() { ...@@ -484,7 +484,7 @@ d3 = function() {
var d3_selectionPrototype = d3.selection.prototype = []; var d3_selectionPrototype = d3.selection.prototype = [];
d3_selectionPrototype.select = function(selector) { d3_selectionPrototype.select = function(selector) {
var subgroups = [], subgroup, subnode, group, node; var subgroups = [], subgroup, subnode, group, node;
if (typeof selector !== "function") selector = d3_selection_selector(selector); selector = d3_selection_selector(selector);
for (var j = -1, m = this.length; ++j < m; ) { for (var j = -1, m = this.length; ++j < m; ) {
subgroups.push(subgroup = []); subgroups.push(subgroup = []);
subgroup.parentNode = (group = this[j]).parentNode; subgroup.parentNode = (group = this[j]).parentNode;
...@@ -500,13 +500,13 @@ d3 = function() { ...@@ -500,13 +500,13 @@ d3 = function() {
return d3_selection(subgroups); return d3_selection(subgroups);
}; };
function d3_selection_selector(selector) { function d3_selection_selector(selector) {
return function() { return typeof selector === "function" ? selector : function() {
return d3_select(selector, this); return d3_select(selector, this);
}; };
} }
d3_selectionPrototype.selectAll = function(selector) { d3_selectionPrototype.selectAll = function(selector) {
var subgroups = [], subgroup, node; var subgroups = [], subgroup, node;
if (typeof selector !== "function") selector = d3_selection_selectorAll(selector); selector = d3_selection_selectorAll(selector);
for (var j = -1, m = this.length; ++j < m; ) { for (var j = -1, m = this.length; ++j < m; ) {
for (var group = this[j], i = -1, n = group.length; ++i < n; ) { for (var group = this[j], i = -1, n = group.length; ++i < n; ) {
if (node = group[i]) { if (node = group[i]) {
...@@ -518,7 +518,7 @@ d3 = function() { ...@@ -518,7 +518,7 @@ d3 = function() {
return d3_selection(subgroups); return d3_selection(subgroups);
}; };
function d3_selection_selectorAll(selector) { function d3_selection_selectorAll(selector) {
return function() { return typeof selector === "function" ? selector : function() {
return d3_selectAll(selector, this); return d3_selectAll(selector, this);
}; };
} }
...@@ -696,25 +696,24 @@ d3 = function() { ...@@ -696,25 +696,24 @@ d3 = function() {
}) : this.node().innerHTML; }) : this.node().innerHTML;
}; };
d3_selectionPrototype.append = function(name) { d3_selectionPrototype.append = function(name) {
name = d3.ns.qualify(name); name = d3_selection_creator(name);
function append() { return this.select(function() {
return this.appendChild(d3_document.createElementNS(this.namespaceURI, name)); return this.appendChild(name.apply(this, arguments));
} });
function appendNS() {
return this.appendChild(d3_document.createElementNS(name.space, name.local));
}
return this.select(name.local ? appendNS : append);
}; };
function d3_selection_creator(name) {
return typeof name === "function" ? name : (name = d3.ns.qualify(name)).local ? function() {
return d3_document.createElementNS(name.space, name.local);
} : function() {
return d3_document.createElementNS(this.namespaceURI, name);
};
}
d3_selectionPrototype.insert = function(name, before) { d3_selectionPrototype.insert = function(name, before) {
name = d3.ns.qualify(name); name = d3_selection_creator(name);
if (typeof before !== "function") before = d3_selection_selector(before); before = d3_selection_selector(before);
function insert(d, i) { return this.select(function() {
return this.insertBefore(d3_document.createElementNS(this.namespaceURI, name), before.call(this, d, i)); return this.insertBefore(name.apply(this, arguments), before.apply(this, arguments));
} });
function insertNS(d, i) {
return this.insertBefore(d3_document.createElementNS(name.space, name.local), before.call(this, d, i));
}
return this.select(name.local ? insertNS : insert);
}; };
d3_selectionPrototype.remove = function() { d3_selectionPrototype.remove = function() {
return this.each(function() { return this.each(function() {
...@@ -7438,7 +7437,7 @@ d3 = function() { ...@@ -7438,7 +7437,7 @@ d3 = function() {
d3.transition.prototype = d3_transitionPrototype; d3.transition.prototype = d3_transitionPrototype;
d3_transitionPrototype.select = function(selector) { d3_transitionPrototype.select = function(selector) {
var id = this.id, subgroups = [], subgroup, subnode, node; var id = this.id, subgroups = [], subgroup, subnode, node;
if (typeof selector !== "function") selector = d3_selection_selector(selector); selector = d3_selection_selector(selector);
for (var j = -1, m = this.length; ++j < m; ) { for (var j = -1, m = this.length; ++j < m; ) {
subgroups.push(subgroup = []); subgroups.push(subgroup = []);
for (var group = this[j], i = -1, n = group.length; ++i < n; ) { for (var group = this[j], i = -1, n = group.length; ++i < n; ) {
...@@ -7455,7 +7454,7 @@ d3 = function() { ...@@ -7455,7 +7454,7 @@ d3 = function() {
}; };
d3_transitionPrototype.selectAll = function(selector) { d3_transitionPrototype.selectAll = function(selector) {
var id = this.id, subgroups = [], subgroup, subnodes, node, subnode, transition; var id = this.id, subgroups = [], subgroup, subnodes, node, subnode, transition;
if (typeof selector !== "function") selector = d3_selection_selectorAll(selector); selector = d3_selection_selectorAll(selector);
for (var j = -1, m = this.length; ++j < m; ) { for (var j = -1, m = this.length; ++j < m; ) {
for (var group = this[j], i = -1, n = group.length; ++i < n; ) { for (var group = this[j], i = -1, n = group.length; ++i < n; ) {
if (node = group[i]) { if (node = group[i]) {
......
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -2,18 +2,15 @@ import "../core/document"; ...@@ -2,18 +2,15 @@ import "../core/document";
import "../core/ns"; import "../core/ns";
import "selection"; import "selection";
// TODO append(node)?
// TODO append(function)?
d3_selectionPrototype.append = function(name) { d3_selectionPrototype.append = function(name) {
name = d3.ns.qualify(name); name = d3_selection_creator(name);
return this.select(function() {
function append() { return this.appendChild(name.apply(this, arguments));
return this.appendChild(d3_document.createElementNS(this.namespaceURI, name)); });
}
function appendNS() {
return this.appendChild(d3_document.createElementNS(name.space, name.local));
}
return this.select(name.local ? appendNS : append);
}; };
function d3_selection_creator(name) {
return typeof name === "function" ? name
: (name = d3.ns.qualify(name)).local ? function() { return d3_document.createElementNS(name.space, name.local); }
: function() { return d3_document.createElementNS(this.namespaceURI, name); };
}
import "../core/document";
import "../core/ns";
import "selection"; import "selection";
d3_selectionPrototype.insert = function(name, before) { d3_selectionPrototype.insert = function(name, before) {
name = d3.ns.qualify(name); name = d3_selection_creator(name);
before = d3_selection_selector(before);
if (typeof before !== "function") before = d3_selection_selector(before); return this.select(function() {
return this.insertBefore(name.apply(this, arguments), before.apply(this, arguments));
function insert(d, i) { });
return this.insertBefore(
d3_document.createElementNS(this.namespaceURI, name),
before.call(this, d, i));
}
function insertNS(d, i) {
return this.insertBefore(
d3_document.createElementNS(name.space, name.local),
before.call(this, d, i));
}
return this.select(name.local ? insertNS : insert);
}; };
...@@ -7,7 +7,7 @@ d3_selectionPrototype.select = function(selector) { ...@@ -7,7 +7,7 @@ d3_selectionPrototype.select = function(selector) {
group, group,
node; node;
if (typeof selector !== "function") selector = d3_selection_selector(selector); selector = d3_selection_selector(selector);
for (var j = -1, m = this.length; ++j < m;) { for (var j = -1, m = this.length; ++j < m;) {
subgroups.push(subgroup = []); subgroups.push(subgroup = []);
...@@ -26,7 +26,7 @@ d3_selectionPrototype.select = function(selector) { ...@@ -26,7 +26,7 @@ d3_selectionPrototype.select = function(selector) {
}; };
function d3_selection_selector(selector) { function d3_selection_selector(selector) {
return function() { return typeof selector === "function" ? selector : function() {
return d3_select(selector, this); return d3_select(selector, this);
}; };
} }
...@@ -6,7 +6,7 @@ d3_selectionPrototype.selectAll = function(selector) { ...@@ -6,7 +6,7 @@ d3_selectionPrototype.selectAll = function(selector) {
subgroup, subgroup,
node; node;
if (typeof selector !== "function") selector = d3_selection_selectorAll(selector); selector = d3_selection_selectorAll(selector);
for (var j = -1, m = this.length; ++j < m;) { for (var j = -1, m = this.length; ++j < m;) {
for (var group = this[j], i = -1, n = group.length; ++i < n;) { for (var group = this[j], i = -1, n = group.length; ++i < n;) {
...@@ -21,7 +21,7 @@ d3_selectionPrototype.selectAll = function(selector) { ...@@ -21,7 +21,7 @@ d3_selectionPrototype.selectAll = function(selector) {
}; };
function d3_selection_selectorAll(selector) { function d3_selection_selectorAll(selector) {
return function() { return typeof selector === "function" ? selector : function() {
return d3_selectAll(selector, this); return d3_selectAll(selector, this);
}; };
} }
...@@ -8,7 +8,7 @@ d3_transitionPrototype.select = function(selector) { ...@@ -8,7 +8,7 @@ d3_transitionPrototype.select = function(selector) {
subnode, subnode,
node; node;
if (typeof selector !== "function") selector = d3_selection_selector(selector); selector = d3_selection_selector(selector);
for (var j = -1, m = this.length; ++j < m;) { for (var j = -1, m = this.length; ++j < m;) {
subgroups.push(subgroup = []); subgroups.push(subgroup = []);
......
...@@ -10,7 +10,7 @@ d3_transitionPrototype.selectAll = function(selector) { ...@@ -10,7 +10,7 @@ d3_transitionPrototype.selectAll = function(selector) {
subnode, subnode,
transition; transition;
if (typeof selector !== "function") selector = d3_selection_selectorAll(selector); selector = d3_selection_selectorAll(selector);
for (var j = -1, m = this.length; ++j < m;) { for (var j = -1, m = this.length; ++j < m;) {
for (var group = this[j], i = -1, n = group.length; ++i < n;) { for (var group = this[j], i = -1, n = group.length; ++i < n;) {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment