remove all children (#276)

* remove all children

fixes #275

* more defensive copy selectAll

* comment array

Co-authored-by: Mike Bostock <mbostock@gmail.com>

src/array.js

@@ -1,5 +1,9 @@
-export default function(x) {
-  return typeof x === "object" && "length" in x
-    ? x // Array, TypedArray, NodeList, array-like
-    : Array.from(x); // Map, Set, iterable, string, or anything else
+// Given something array like (or null), returns something that is strictly an
+// array. This is used to ensure that array-like objects passed to d3.selectAll
+// or selection.selectAll are converted into proper arrays when creating a
+// selection; we don’t ever want to create a selection backed by a live
+// HTMLCollection or NodeList. However, note that selection.selectAll will use a
+// static NodeList as a group, since it safely derived from querySelectorAll.
+export default function array(x) {
+  return x == null ? [] : Array.isArray(x) ? x : Array.from(x);
 }

src/selectAll.js

@@ -4,5 +4,5 @@ import {Selection, root} from "./selection/index.js";
 export default function(selector) {
   return typeof selector === "string"
       ? new Selection([document.querySelectorAll(selector)], [document.documentElement])
-      : new Selection([selector == null ? [] : array(selector)], root);
+      : new Selection([array(selector)], root);
 }

src/selection/data.js

@@ -1,6 +1,5 @@
 import {Selection} from "./index.js";
 import {EnterNode} from "./enter.js";
-import array from "../array.js";
 import constant from "../constant.js";
 
 function bindIndex(parent, group, enter, update, exit, data) {
@@ -90,7 +89,7 @@ export default function(value, key) {
     var parent = parents[j],
         group = groups[j],
         groupLength = group.length,
-        data = array(value.call(parent, parent && parent.__data__, j, parents)),
+        data = arraylike(value.call(parent, parent && parent.__data__, j, parents)),
         dataLength = data.length,
         enterGroup = enter[j] = new Array(dataLength),
         updateGroup = update[j] = new Array(dataLength),
@@ -115,3 +114,15 @@ export default function(value, key) {
   update._exit = exit;
   return update;
 }
+
+// Given some data, this returns an array-like view of it: an object that
+// exposes a length property and allows numeric indexing. Note that unlike
+// selectAll, this isn’t worried about “live” collections because the resulting
+// array will only be used briefly while data is being bound. (It is possible to
+// cause the data to change while iterating by using a key function, but please
+// don’t; we’d rather avoid a gratuitous copy.)
+function arraylike(data) {
+  return typeof data === "object" && "length" in data
+    ? data // Array, TypedArray, NodeList, array-like
+    : Array.from(data); // Map, Set, iterable, string, or anything else
+}

src/selection/selectAll.js

@@ -4,8 +4,7 @@ import selectorAll from "../selectorAll.js";
 
 function arrayAll(select) {
   return function() {
-    var group = select.apply(this, arguments);
-    return group == null ? [] : array(group);
+    return array(select.apply(this, arguments));
   };
 }
 

src/selection/selectChildren.js

@@ -3,7 +3,7 @@ import {childMatcher} from "../matcher.js";
 var filter = Array.prototype.filter;
 
 function children() {
-  return this.children;
+  return Array.from(this.children);
 }
 
 function childrenFilter(match) {

test/selection/remove-test.js

@@ -1,5 +1,5 @@
 import assert from "assert";
-import {selectAll} from "../../src/index.js";
+import {select, selectAll} from "../../src/index.js";
 import it from "../jsdom.js";
 
 it("selection.remove() removes selected elements from their parent", "<h1 id='one'></h1><h1 id='two'></h1>", () => {
@@ -29,3 +29,11 @@ it("selection.remove() skips missing elements", "<h1 id='one'></h1><h1 id='two'>
   assert.strictEqual(one.parentNode, null);
   assert.strictEqual(two.parentNode, document.body);
 });
+
+it("selectChildren().remove() removes all children", "<div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>", () => {
+  const p = document.querySelector("div");
+  const selection = select(p).selectChildren();
+  assert.strictEqual(selection.size(), 10);
+  assert.strictEqual(selection.remove(), selection);
+  assert.strictEqual(select(p).selectChildren().size(), 0);
+});