From 35edfe61d30105099a563e6b3b39a9e114b1de01 Mon Sep 17 00:00:00 2001 From: xufanglu <3146974+likev@users.noreply.github.com> Date: Mon, 6 Apr 2020 17:14:04 +0800 Subject: [PATCH 1/2] Update README.md append a DIV element to paragraph is not valid HTML https://stackoverflow.com/questions/10763780/putting-div-inside-p-is-adding-an-extra-p https://www.w3docs.com/learn-html/html-div-tag.html --- README.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 6bdd765..e3357c9 100644 --- a/README.md +++ b/README.md @@ -320,23 +320,23 @@ Use [*selection*.append](#selection_append) or [*selection*.insert](#selection_i If the specified *type* is a string, appends a new element of this type (tag name) as the last child of each selected element, or before the next following sibling in the update selection if this is an [enter selection](#selection_enter). The latter behavior for enter selections allows you to insert elements into the DOM in an order consistent with the new bound data; however, note that [*selection*.order](#selection_order) may still be required if updating elements change order (*i.e.*, if the order of new data is inconsistent with old data). -If the specified *type* is a function, it is evaluated for each selected element, in order, being passed the current datum (*d*), the current index (*i*), and the current group (*nodes*), with *this* as the current DOM element (*nodes*[*i*]). This function should return an element to be appended. (The function typically creates a new element, but it may instead return an existing element.) For example, to append a DIV element to each paragraph: +If the specified *type* is a function, it is evaluated for each selected element, in order, being passed the current datum (*d*), the current index (*i*), and the current group (*nodes*), with *this* as the current DOM element (*nodes*[*i*]). This function should return an element to be appended. (The function typically creates a new element, but it may instead return an existing element.) For example, to append a paragraph to each DIV element: ```js -d3.selectAll("p").append("div"); +d3.selectAll("div").append("p"); ``` This is equivalent to: ```js -d3.selectAll("p").append(() => document.createElement("div")); +d3.selectAll("div").append(() => document.createElement("p")); ``` Which is equivalent to: ```js -d3.selectAll("p").select(function() { - return this.appendChild(document.createElement("div")); +d3.selectAll("div").select(function() { + return this.appendChild(document.createElement("p")); }); ``` @@ -348,23 +348,23 @@ The specified *name* may have a namespace prefix, such as `svg:text` to specify If the specified *type* is a string, inserts a new element of this type (tag name) before the first element matching the specified *before* selector for each selected element. For example, a *before* selector `:first-child` will prepend nodes before the first child. If *before* is not specified, it defaults to null. (To append elements in an order consistent with [bound data](#joining-data), use [*selection*.append](#selection_append).) -Both *type* and *before* may instead be specified as functions which are evaluated for each selected element, in order, being passed the current datum (*d*), the current index (*i*), and the current group (*nodes*), with *this* as the current DOM element (*nodes*[*i*]). The *type* function should return an element to be inserted; the *before* function should return the child element before which the element should be inserted. For example, to append a DIV element to each paragraph: +Both *type* and *before* may instead be specified as functions which are evaluated for each selected element, in order, being passed the current datum (*d*), the current index (*i*), and the current group (*nodes*), with *this* as the current DOM element (*nodes*[*i*]). The *type* function should return an element to be inserted; the *before* function should return the child element before which the element should be inserted. For example, to append a paragraph to each DIV element: ```js -d3.selectAll("p").insert("div"); +d3.selectAll("div").insert("p"); ``` This is equivalent to: ```js -d3.selectAll("p").insert(() => document.createElement("div")); +d3.selectAll("div").insert(() => document.createElement("p")); ``` Which is equivalent to: ```js -d3.selectAll("p").select(function() { - return this.insertBefore(document.createElement("div"), null); +d3.selectAll("div").select(function() { + return this.insertBefore(document.createElement("p"), null); }); ``` From 9f3c5e87fd89fbd318f10bcf90243a8a1f4fecda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Mon, 29 Jun 2020 12:08:32 +0200 Subject: [PATCH 2/2] *selection*.selection() returns itself fixes #238 --- README.md | 4 ++++ src/selection/index.js | 5 +++++ test/selection/select-test.js | 8 ++++++++ 3 files changed, 17 insertions(+) diff --git a/README.md b/README.md index e3357c9..3122829 100644 --- a/README.md +++ b/README.md @@ -198,6 +198,10 @@ See [*selection*.data](#selection_data) for more. This method is not intended for concatenating arbitrary selections, however: if both this selection and the specified *other* selection have (non-null) elements at the same index, this selection’s element is returned in the merge and the *other* selection’s element is ignored. +# selection.selection() [<>](https://github.com/d3/d3-selection/blob/master/src/selection/index.js "Source") + +Returns the selection (for symmetry with [transition.selection](https://github.com/d3/d3-transition/blob/master/README.md#transition_selection)). + # d3.matcher(selector) [<>](https://github.com/d3/d3-selection/blob/master/src/matcher.js "Source") Given the specified *selector*, returns a function which returns true if `this` element [matches](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches) the specified selector. This method is used internally by [*selection*.filter](#selection_filter). For example, this: diff --git a/src/selection/index.js b/src/selection/index.js index 901c495..8f0a296 100644 --- a/src/selection/index.js +++ b/src/selection/index.js @@ -41,6 +41,10 @@ function selection() { return new Selection([[document.documentElement]], root); } +function selection_selection() { + return this; +} + Selection.prototype = selection.prototype = { constructor: Selection, select: selection_select, @@ -51,6 +55,7 @@ Selection.prototype = selection.prototype = { exit: selection_exit, join: selection_join, merge: selection_merge, + selection: selection_selection, order: selection_order, sort: selection_sort, call: selection_call, diff --git a/test/selection/select-test.js b/test/selection/select-test.js index 710520a..7048d99 100644 --- a/test/selection/select-test.js +++ b/test/selection/select-test.js @@ -106,3 +106,11 @@ tape("selection.select(…) skips missing originating elements when the originat test.deepEqual(d3.selectAll([one, two]).selectAll("child").select(function(d, i) { return i & 1 ? this : null; }).select("span"), {_groups: [[, three], [, four]], _parents: [one, two]}); test.end(); }); + +tape("selection.selection() returns itself", function(test) { + var document = jsdom("

hello

"); + var sel = d3.select(document).select("h1"); + test.ok(sel === sel.selection()); + test.ok(sel === sel.selection().selection()); + test.end(); +});