From 6e6bdd3e7befe2a0171349d3c441fd1443937aa7 Mon Sep 17 00:00:00 2001 From: Curran Date: Sun, 20 Feb 2022 23:25:05 -0500 Subject: [PATCH 1/9] Introduce one --- src/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.js b/src/index.js index dc51a3b..3a4337b 100644 --- a/src/index.js +++ b/src/index.js @@ -4,6 +4,7 @@ export {default as local} from "./local.js"; export {default as matcher} from "./matcher.js"; export {default as namespace} from "./namespace.js"; export {default as namespaces} from "./namespaces.js"; +export {default as one} from "./one.js"; export {default as pointer} from "./pointer.js"; export {default as pointers} from "./pointers.js"; export {default as select} from "./select.js"; From a98b015df66a159f1443a3884cac130101eb0886 Mon Sep 17 00:00:00 2001 From: Curran Date: Sun, 20 Feb 2022 23:25:50 -0500 Subject: [PATCH 2/9] Add one.js --- src/one.js | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 src/one.js diff --git a/src/one.js b/src/one.js new file mode 100644 index 0000000..9e0547d --- /dev/null +++ b/src/one.js @@ -0,0 +1,8 @@ +export default (selection, selector) => { + const [name, className] = selector.split('.'); + return selection + .selectAll(name + '.' + className) + .data([null]) + .join(name) + .attr('class', className); +} From dcbf32d870d76c75fb44c106d71cd97d0d89fa26 Mon Sep 17 00:00:00 2001 From: Curran Date: Mon, 7 Mar 2022 10:33:30 -0500 Subject: [PATCH 3/9] Simplify d3.one to remove DSL --- src/one.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/one.js b/src/one.js index 9e0547d..f919969 100644 --- a/src/one.js +++ b/src/one.js @@ -1,8 +1,6 @@ -export default (selection, selector) => { - const [name, className] = selector.split('.'); - return selection +export default (selection, name, className) => + selection .selectAll(name + '.' + className) .data([null]) .join(name) .attr('class', className); -} From b2ae2a1ff0b9d2cde73a06b263cd0617e0f24dd2 Mon Sep 17 00:00:00 2001 From: Curran Date: Thu, 10 Mar 2022 17:55:16 -0500 Subject: [PATCH 4/9] Make className optional --- src/one.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/one.js b/src/one.js index f919969..7678d97 100644 --- a/src/one.js +++ b/src/one.js @@ -1,6 +1,8 @@ export default (selection, name, className) => - selection - .selectAll(name + '.' + className) - .data([null]) - .join(name) - .attr('class', className); + className + ? selection + .selectAll(`${name}.${className}`) + .data([null]) + .join(name) + .attr('class', className) + : selection.selectAll(name).data([null]).join(name); From 6d7fe0fb5d981ec6282ceb585396b469e19f02ae Mon Sep 17 00:00:00 2001 From: Curran Date: Sat, 20 Aug 2022 15:27:27 -0400 Subject: [PATCH 5/9] Simplify implementation. Add documentation. --- README.md | 20 ++++++++++++++++++++ src/one.js | 12 +++++------- 2 files changed, 25 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index b8513c6..9a7e90e 100644 --- a/README.md +++ b/README.md @@ -276,6 +276,26 @@ Returns the owner window for the specified *node*. If *node* is a node, returns Returns the value of the style property with the specified *name* for the specified *node*. If the *node* has an inline style with the specified *name*, its value is returned; otherwise, the [computed property value](https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value) is returned. See also [*selection*.style](#selection_style). +# d3.one(selection, name, class) · [Source](https://github.com/d3/d3-selection/blob/master/src/selection/one.js) + +A convenience utility for managing a single element of the given name and class within the given selection. + +For example, consider the following logic for managing an axis container: + +```js +const xAxisG = selection + .selectAll(`g.x-axis`) + .data([null]) + .join('g') + .attr('class', 'x-axis'); +``` + +The above logic can be expressed more concisely as: + +```js +const xAxisG = one(selection, 'g', 'x-axis'); +``` + ### Modifying Elements After selecting elements, use the selection’s transformation methods to affect document content. For example, to set the name attribute and color style of an anchor element: diff --git a/src/one.js b/src/one.js index 7678d97..c02f0d9 100644 --- a/src/one.js +++ b/src/one.js @@ -1,8 +1,6 @@ export default (selection, name, className) => - className - ? selection - .selectAll(`${name}.${className}`) - .data([null]) - .join(name) - .attr('class', className) - : selection.selectAll(name).data([null]).join(name); + selection + .selectAll(`${name}.${className}`) + .data([null]) + .join(name) + .attr('class', className); From c15565cda23df73e2b73f2aab92d8fdbf4f6e6e6 Mon Sep 17 00:00:00 2001 From: Curran Kelleher <68416+curran@users.noreply.github.com> Date: Tue, 20 Sep 2022 23:26:04 -0400 Subject: [PATCH 6/9] Make className optional --- src/one.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/one.js b/src/one.js index c02f0d9..8c6b7ae 100644 --- a/src/one.js +++ b/src/one.js @@ -1,6 +1,6 @@ export default (selection, name, className) => selection - .selectAll(`${name}.${className}`) + .selectAll(className ? `${name}.${className}`: name) .data([null]) .join(name) .attr('class', className); From 785fd5f1c38c2e08aa2832c716379d89b3ba2ebc Mon Sep 17 00:00:00 2001 From: Curran Kelleher <68416+curran@users.noreply.github.com> Date: Tue, 20 Sep 2022 23:29:24 -0400 Subject: [PATCH 7/9] Actually support optional className --- src/one.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/one.js b/src/one.js index 8c6b7ae..793c93f 100644 --- a/src/one.js +++ b/src/one.js @@ -1,6 +1,12 @@ export default (selection, name, className) => - selection - .selectAll(className ? `${name}.${className}`: name) - .data([null]) - .join(name) - .attr('class', className); + className + ? selection + .selectAll(`${name}.${className}`) + .data([null]) + .join(name) + .attr('class', className) + : selection + .selectAll(name) + .data([null]) + .join(name); + From e7f6c4468be4a379d65751df95b7ce16dfc8afe6 Mon Sep 17 00:00:00 2001 From: Curran Kelleher <68416+curran@users.noreply.github.com> Date: Sun, 25 Sep 2022 08:47:23 -0400 Subject: [PATCH 8/9] Update documentation to reflect optional class --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 9a7e90e..5c29c5e 100644 --- a/README.md +++ b/README.md @@ -276,9 +276,9 @@ Returns the owner window for the specified *node*. If *node* is a node, returns Returns the value of the style property with the specified *name* for the specified *node*. If the *node* has an inline style with the specified *name*, its value is returned; otherwise, the [computed property value](https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value) is returned. See also [*selection*.style](#selection_style). -# d3.one(selection, name, class) · [Source](https://github.com/d3/d3-selection/blob/master/src/selection/one.js) +# d3.one(selection, name[, class]) · [Source](https://github.com/d3/d3-selection/blob/master/src/selection/one.js) -A convenience utility for managing a single element of the given name and class within the given selection. +A convenience utility for managing a single element of the given name within the given selection. Optionally a class can be specified to disambiguate between siblings of the same name. For example, consider the following logic for managing an axis container: From 379d78a2a3e16246afc59392063b2a7a78fec497 Mon Sep 17 00:00:00 2001 From: Curran Date: Sun, 25 Sep 2022 09:04:09 -0400 Subject: [PATCH 9/9] Add tests for one --- test/selection/one-test.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 test/selection/one-test.js diff --git a/test/selection/one-test.js b/test/selection/one-test.js new file mode 100644 index 0000000..e748de5 --- /dev/null +++ b/test/selection/one-test.js @@ -0,0 +1,22 @@ +import assert from "assert"; +import {select, one} from "../../src/index.js"; +import it from "../jsdom.js"; + +it("selection.one(name) manages a single element", "
", () => { + const container = document.querySelector("#container"); + const s = select(container); + const div = one(s, "div"); + assert.strictEqual(div._groups[0][0].tagName, "DIV"); +}); + +it("selection.one(name, class) elements by class", "
", () => { + const container = document.querySelector("#container"); + const s = select(container); + const a = one(s, "div", "a"); + const b = one(s, "div", "b"); + assert.strictEqual(a._groups[0][0].tagName, "DIV"); + assert.strictEqual(a._groups[0][0].className, "a"); + assert.strictEqual(b._groups[0][0].tagName, "DIV"); + assert.strictEqual(b._groups[0][0].className, "b"); +}); +