Copy-on-write for selection.data.

Also fix a bug where the exit groups could contain undefined entries, rather
than being sparse, when a key function is used to join data.

Author: mbostock

src/selection/arrayify.js

@@ -1,79 +1,56 @@
-import arrayify from "./arrayify";
+import {Selection} from "./index";
 import constant from "../constant";
 
 var keyPrefix = "$"; // Protect against keys like “__proto__”.
 
-function bindIndex(parent, update, enter, exit, data) {
+function bindIndex(parent, group, enter, update, exit, data) {
   var i = 0,
       node,
-      nodeLength = update.length,
-      dataLength = data.length,
-      minLength = Math.min(nodeLength, dataLength);
-
-  // Clear the enter and exit arrays, and then initialize to the new length.
-  enter.length = 0, enter.length = dataLength;
-  exit.length = 0, exit.length = nodeLength;
+      groupLength = group.length,
+      dataLength = data.length;
 
-  for (; i < minLength; ++i) {
-    if (node = update[i]) {
+  // Put any non-null nodes that fit into update.
+  // Put any null nodes into enter.
+  // Put any remaining data into enter.
+  for (; i < dataLength; ++i) {
+    if (node = group[i]) {
       node.__data__ = data[i];
+      update[i] = node;
     } else {
       enter[i] = new EnterNode(parent, data[i]);
     }
   }
 
-  // Note: we don’t need to delete update[i] here because this loop only
-  // runs when the data length is greater than the node length.
-  for (; i < dataLength; ++i) {
-    enter[i] = new EnterNode(parent, data[i]);
-  }
-
-  // Note: and, we don’t need to delete update[i] here because immediately
-  // following this loop we set the update length to data length.
-  for (; i < nodeLength; ++i) {
-    if (node = update[i]) {
-      exit[i] = update[i];
+  // Put any non-null nodes that don’t fit into exit.
+  for (; i < groupLength; ++i) {
+    if (node = group[i]) {
+      exit[i] = node;
     }
   }
-
-  update.length = dataLength;
 }
 
-function bindKey(parent, update, enter, exit, data, key) {
+function bindKey(parent, group, enter, update, exit, data, key) {
   var i,
       node,
-      dataLength = data.length,
-      nodeLength = update.length,
       nodeByKeyValue = {},
-      keyValues = new Array(nodeLength),
+      groupLength = group.length,
+      dataLength = data.length,
+      keyValues = new Array(groupLength),
       keyValue;
 
-  // Clear the enter and exit arrays, and then initialize to the new length.
-  enter.length = 0, enter.length = dataLength;
-  exit.length = 0, exit.length = nodeLength;
-
-  // Compute the keys for each node.
-  for (i = 0; i < nodeLength; ++i) {
-    if (node = update[i]) {
-      keyValues[i] = keyValue = keyPrefix + key.call(node, node.__data__, i, update);
-
-      // Is this a duplicate of a key we’ve previously seen?
-      // If so, this node is moved to the exit selection.
-      if (nodeByKeyValue[keyValue]) {
-        exit[i] = node;
-      }
-
-      // Otherwise, record the mapping from key to node.
-      else {
+  // Compute the key for each node.
+  // If multiple nodes have the same key, only the first one counts.
+  for (i = 0; i < groupLength; ++i) {
+    if (node = group[i]) {
+      keyValues[i] = keyValue = keyPrefix + key.call(node, node.__data__, i, group);
+      if (!nodeByKeyValue[keyValue]) {
         nodeByKeyValue[keyValue] = node;
       }
     }
   }
 
-  // Now clear the update array and initialize to the new length.
-  update.length = 0, update.length = dataLength;
-
-  // Compute the keys for each datum.
+  // Compute the key for each datum.
+  // If multiple data have the same key, only the first one counts.
   for (i = 0; i < dataLength; ++i) {
     keyValue = keyPrefix + key.call(parent, data[i], i, data);
 
@@ -97,46 +74,53 @@ function bindKey(parent, update, enter, exit, data, key) {
 
   // Take any remaining nodes that were not bound to data,
   // and place them in the exit selection.
-  for (i = 0; i < nodeLength; ++i) {
-    if ((node = nodeByKeyValue[keyValues[i]]) !== true) {
+  for (i = 0; i < groupLength; ++i) {
+    if ((node = group[i]) && (nodeByKeyValue[keyValues[i]] !== true)) {
       exit[i] = node;
     }
   }
 }
 
 export default function(value, key) {
   if (!value) {
-    var data = new Array(this.size()), i = -1;
-    this.each(function(d) { data[++i] = d; });
+    data = new Array(this.size()), j = -1;
+    this.each(function(d) { data[++j] = d; });
     return data;
   }
 
   var bind = key ? bindKey : bindIndex,
       parents = this._parents,
-      update = arrayify(this),
-      enter = (this._enter = this.enter())._groups,
-      exit = (this._exit = this.exit())._groups;
+      groups = this._groups;
 
   if (typeof value !== "function") value = constant(value);
 
-  for (var m = update.length, j = 0; j < m; ++j) {
-    var group = update[j],
-        parent = parents[j];
+  for (var m = groups.length, update = new Array(m), enter = new Array(m), exit = new Array(m), j = 0; j < m; ++j) {
+    var parent = parents[j],
+        group = groups[j],
+        groupLength = group.length,
+        data = value.call(parent, parent && parent.__data__, j, parents),
+        dataLength = data.length,
+        enterGroup = enter[j] = new Array(dataLength),
+        updateGroup = update[j] = new Array(dataLength),
+        exitGroup = exit[j] = new Array(groupLength);
 
-    bind(parent, group, enter[j], exit[j], value.call(parent, parent && parent.__data__, j, parents), key);
+    bind(parent, group, enterGroup, updateGroup, exitGroup, data, key);
 
     // Now connect the enter nodes to their following update node, such that
     // appendChild can insert the materialized enter node before this node,
     // rather than at the end of the parent node.
-    for (var n = group.length, i0 = 0, i1 = 0, previous, next; i0 < n; ++i0) {
-      if (previous = enter[j][i0]) {
+    for (var i0 = 0, i1 = 0, previous, next; i0 < dataLength; ++i0) {
+      if (previous = enterGroup[i0]) {
         if (i0 >= i1) i1 = i0 + 1;
-        while (!(next = group[i1]) && ++i1 < n);
+        while (!(next = updateGroup[i1]) && ++i1 < dataLength);
         previous._next = next || null;
       }
     }
   }
 
+  this._groups = update;
+  (this._enter = new Selection(enter, parents))._update = this;
+  this._exit = new Selection(exit, parents);
   return this;
 }
 

src/selection/data.js

@@ -190,7 +190,7 @@ tape("selection.data(values, function) passes the key function datum, index and
       .datum("foo");
 
   d3.select(body).selectAll("node")
-      .data(["foo", "bar"], function(d, i, nodes) { results.push([this, d, i, nodes.slice()]); return d || this.id; });
+      .data(["foo", "bar"], function(d, i, nodes) { results.push([this, d, i, nodes]); return d || this.id; });
 
   test.deepEqual(results, [
     [one, "foo", 0, [one, two]],
@@ -234,3 +234,78 @@ tape("selection.data(values, function) applies the order of the data", function(
   });
   test.end();
 });
+
+tape("selection.data(values) does not modify the groups array in-place", function(test) {
+  var document = jsdom.jsdom("<h1 id='one'></h1><h1 id='two'></h1>"),
+      root = document.documentElement,
+      one = document.querySelector("#one"),
+      two = document.querySelector("#two"),
+      selection = d3.select(root).selectAll("h1"),
+      groups0 = selection._groups,
+      group0 = groups0[0],
+      updates1 = selection.data([1, 2, 3])._groups,
+      update1 = updates1[0],
+      enters1 = selection._enter._groups,
+      enter1 = enters1[0],
+      exits1 = selection._exit._groups,
+      exit1 = exits1[0],
+      updates2 = selection.data([1])._groups,
+      update2 = updates2[0],
+      enters2 = selection._enter._groups,
+      enter2 = enters2[0],
+      exits2 = selection._exit._groups,
+      exit2 = exits2[0];
+  test.deepEqual(group0, [one, two]);
+  test.deepEqual(groups0, [[one, two]]);
+  test.deepEqual(update1, [one, two,]);
+  test.deepEqual(updates1, [[one, two,]]);
+  test.deepEqual(enter1, [,, {__data__: 3, _next: null, _parent: root, namespaceURI: "http://www.w3.org/1999/xhtml", ownerDocument: document}]);
+  test.deepEqual(enters1, [[,, {__data__: 3, _next: null, _parent: root, namespaceURI: "http://www.w3.org/1999/xhtml", ownerDocument: document}]]);
+  test.deepEqual(exit1, [,]);
+  test.deepEqual(exits1, [[,]]);
+  test.deepEqual(update2, [one]);
+  test.deepEqual(updates2, [[one]]);
+  test.deepEqual(enter2, [,]);
+  test.deepEqual(enters2, [[,]]);
+  test.deepEqual(exit2, [, two]);
+  test.deepEqual(exits2, [[, two]]);
+  test.end();
+});
+
+tape("selection.data(values, key) does not modify the groups array in-place", function(test) {
+  var document = jsdom.jsdom("<h1 id='one'></h1><h1 id='two'></h1>"),
+      root = document.documentElement,
+      one = document.querySelector("#one"),
+      two = document.querySelector("#two"),
+      selection = d3.select(root).selectAll("h1"),
+      key = function(d, i) { return i; },
+      groups0 = selection._groups,
+      group0 = groups0[0],
+      updates1 = selection.data([1, 2, 3], key)._groups,
+      update1 = updates1[0],
+      enters1 = selection._enter._groups,
+      enter1 = enters1[0],
+      exits1 = selection._exit._groups,
+      exit1 = exits1[0],
+      updates2 = selection.data([1], key)._groups,
+      update2 = updates2[0],
+      enters2 = selection._enter._groups,
+      enter2 = enters2[0],
+      exits2 = selection._exit._groups,
+      exit2 = exits2[0];
+  test.deepEqual(group0, [one, two]);
+  test.deepEqual(groups0, [[one, two]]);
+  test.deepEqual(update1, [one, two,]);
+  test.deepEqual(updates1, [[one, two,]]);
+  test.deepEqual(enter1, [,, {__data__: 3, _next: null, _parent: root, namespaceURI: "http://www.w3.org/1999/xhtml", ownerDocument: document}]);
+  test.deepEqual(enters1, [[,, {__data__: 3, _next: null, _parent: root, namespaceURI: "http://www.w3.org/1999/xhtml", ownerDocument: document}]]);
+  test.deepEqual(exit1, [,]);
+  test.deepEqual(exits1, [[,]]);
+  test.deepEqual(update2, [one]);
+  test.deepEqual(updates2, [[one]]);
+  test.deepEqual(enter2, [,]);
+  test.deepEqual(enters2, [[,]]);
+  test.deepEqual(exit2, [, two]);
+  test.deepEqual(exits2, [[, two]]);
+  test.end();
+});