From ffc36a7972e9456177be22a3e859c761d003a1c5 Mon Sep 17 00:00:00 2001 From: Ian Wright Date: Wed, 6 Apr 2022 18:40:19 +0100 Subject: [PATCH 1/9] axis.tickSize accepts a function * axis.tickSize accepts a function to allow changing the tickSize dynamically on a per tick basis --- README.md | 4 +- src/axis.js | 5 ++- test/axis-test.js | 11 ++++++ test/snapshots.js | 6 +++ test/snapshots/axisLeftTickSizeFunction.html | 39 ++++++++++++++++++++ 5 files changed, 61 insertions(+), 4 deletions(-) create mode 100644 test/snapshots/axisLeftTickSizeFunction.html diff --git a/README.md b/README.md index 6c65e82..c7b0cd7 100644 --- a/README.md +++ b/README.md @@ -189,9 +189,9 @@ axis.ticks(10, ",f"); This has the advantage of setting the format precision automatically based on the tick interval. -# axis.tickSize([size]) · [Source](https://github.com/d3/d3-axis/blob/master/src/axis.js) +# axis.tickSize([value]) · [Source](https://github.com/d3/d3-axis/blob/master/src/axis.js) -If *size* is specified, sets the [inner](#axis_tickSizeInner) and [outer](#axis_tickSizeOuter) tick size to the specified value and returns the axis. If *size* is not specified, returns the current inner tick size, which defaults to 6. +If *value* is a function, it is evaluated for each tick, in order, being passed the current tick datum (d) and the current index (i) and returns the axis. If *value* is a constant, sets the [inner](#axis_tickSizeInner) and [outer](#axis_tickSizeOuter) tick size to the specified value, removes any previously set tick size function and returns the axis. If *value* is not specified, returns the current tick size function (if specified) or the inner tick size, which defaults to 6. # axis.tickSizeInner([size]) · [Source](https://github.com/d3/d3-axis/blob/master/src/axis.js) diff --git a/src/axis.js b/src/axis.js index 78e1bcb..737d6b2 100644 --- a/src/axis.js +++ b/src/axis.js @@ -35,6 +35,7 @@ function axis(orient, scale) { tickSizeInner = 6, tickSizeOuter = 6, tickPadding = 3, + tickSizeFunction = null, offset = typeof window !== "undefined" && window.devicePixelRatio > 1 ? 0 : 0.5, k = orient === top || orient === left ? -1 : 1, x = orient === left || orient === right ? "x" : "y", @@ -98,7 +99,7 @@ function axis(orient, scale) { .attr("transform", function(d) { return transform(position(d) + offset); }); line - .attr(x + "2", k * tickSizeInner); + .attr(x + "2", function(d, i) { return tickSizeFunction ? tickSizeFunction(d, i) : k * tickSizeInner }); text .attr(x, k * spacing) @@ -135,7 +136,7 @@ function axis(orient, scale) { }; axis.tickSize = function(_) { - return arguments.length ? (tickSizeInner = tickSizeOuter = +_, axis) : tickSizeInner; + return arguments.length ? (typeof _ === "function" ? (tickSizeFunction = _, axis) : (tickSizeFunction = null, tickSizeInner = tickSizeOuter = +_, axis)) : tickSizeFunction || tickSizeInner; }; axis.tickSizeInner = function(_) { diff --git a/test/axis-test.js b/test/axis-test.js index 9df3f14..b897000 100644 --- a/test/axis-test.js +++ b/test/axis-test.js @@ -66,3 +66,14 @@ it("axis.tickValues(values) accepts an iterable", () => { const a = axisLeft(scaleLinear()).tickValues(new Set([1, 2, 3])); assert.deepStrictEqual(a.tickValues(), [1, 2, 3]); }); + +it("axis.tickSize(value) accepts a number", () => { + const a = axisLeft(scaleLinear()).tickSize(5); + assert.strictEqual(a.tickSize(), 5); +}); + +it("axis.tickSize(value) accepts a function", () => { + const v = function(d, i ) { return i * 2; } + const a = axisLeft(scaleLinear()).tickSize(v); + assert.strictEqual(a.tickSize(), v); +}) diff --git a/test/snapshots.js b/test/snapshots.js index 7141a9a..8996aab 100644 --- a/test/snapshots.js +++ b/test/snapshots.js @@ -13,3 +13,9 @@ export function axisLeftScaleLinearNonNumericRange() { svg.append("g").call(axisLeft(scaleLinear().range([0, "500"]))); return svg.node(); } + +export function axisLeftTickSizeFunction() { + const svg = create("svg"); + svg.append("g").call(axisLeft(scaleLinear()).tickSize(function(d, i) { return i * 2 })); + return svg.node(); +} diff --git a/test/snapshots/axisLeftTickSizeFunction.html b/test/snapshots/axisLeftTickSizeFunction.html new file mode 100644 index 0000000..f7d43f2 --- /dev/null +++ b/test/snapshots/axisLeftTickSizeFunction.html @@ -0,0 +1,39 @@ + + + + + + 0.0 + + + 0.1 + + + 0.2 + + + 0.3 + + + 0.4 + + + 0.5 + + + 0.6 + + + 0.7 + + + 0.8 + + + 0.9 + + + 1.0 + + + \ No newline at end of file From a3e89d2573b9fbc5095682bd974ca2f3875718a8 Mon Sep 17 00:00:00 2001 From: Ian Wright Date: Wed, 6 Apr 2022 20:48:29 +0100 Subject: [PATCH 2/9] Update src/axis.js Pass function rather than manually calling Co-authored-by: Mike Bostock --- src/axis.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/axis.js b/src/axis.js index 737d6b2..5d03c93 100644 --- a/src/axis.js +++ b/src/axis.js @@ -99,7 +99,7 @@ function axis(orient, scale) { .attr("transform", function(d) { return transform(position(d) + offset); }); line - .attr(x + "2", function(d, i) { return tickSizeFunction ? tickSizeFunction(d, i) : k * tickSizeInner }); + .attr(x + "2", tickSizeFunction == null ? k * tickSizeInner : tickSizeFunction); text .attr(x, k * spacing) From d998ef489c09ea2959b6a7ca82c2415af6b9df77 Mon Sep 17 00:00:00 2001 From: Ian Wright Date: Wed, 6 Apr 2022 20:48:49 +0100 Subject: [PATCH 3/9] Update test/axis-test.js Missing semi colon! Co-authored-by: Mike Bostock --- test/axis-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/axis-test.js b/test/axis-test.js index b897000..95ba73f 100644 --- a/test/axis-test.js +++ b/test/axis-test.js @@ -76,4 +76,4 @@ it("axis.tickSize(value) accepts a function", () => { const v = function(d, i ) { return i * 2; } const a = axisLeft(scaleLinear()).tickSize(v); assert.strictEqual(a.tickSize(), v); -}) +}); From 1459604c1f36192710701707880b421b444936ee Mon Sep 17 00:00:00 2001 From: Ian Wright Date: Wed, 6 Apr 2022 20:49:23 +0100 Subject: [PATCH 4/9] Update test/axis-test.js Safe to use arrow function in unit tests Co-authored-by: Mike Bostock --- test/axis-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/axis-test.js b/test/axis-test.js index 95ba73f..5e1b4c1 100644 --- a/test/axis-test.js +++ b/test/axis-test.js @@ -73,7 +73,7 @@ it("axis.tickSize(value) accepts a number", () => { }); it("axis.tickSize(value) accepts a function", () => { - const v = function(d, i ) { return i * 2; } + const v = (d, i) => i * 2; const a = axisLeft(scaleLinear()).tickSize(v); assert.strictEqual(a.tickSize(), v); }); From 3938926c921a882d36b5d3c9ab9dff1fc1bc4c11 Mon Sep 17 00:00:00 2001 From: Ian Wright Date: Wed, 6 Apr 2022 20:50:11 +0100 Subject: [PATCH 5/9] Update src/axis.js Clear tickSizeInner and tickSizeOuter when setting tickSizeFunction Co-authored-by: Mike Bostock --- src/axis.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/axis.js b/src/axis.js index 5d03c93..2940f43 100644 --- a/src/axis.js +++ b/src/axis.js @@ -136,7 +136,7 @@ function axis(orient, scale) { }; axis.tickSize = function(_) { - return arguments.length ? (typeof _ === "function" ? (tickSizeFunction = _, axis) : (tickSizeFunction = null, tickSizeInner = tickSizeOuter = +_, axis)) : tickSizeFunction || tickSizeInner; + return arguments.length ? (typeof _ === "function" ? (tickSizeInner = tickSizeOuter = null, tickSizeFunction = _, axis) : (tickSizeFunction = null, tickSizeInner = tickSizeOuter = +_, axis)) : tickSizeFunction || tickSizeInner; }; axis.tickSizeInner = function(_) { From 272cee21c3dbdfe32f7d8230b34b83ae63d84ec2 Mon Sep 17 00:00:00 2001 From: Ian Wright Date: Thu, 7 Apr 2022 07:36:04 +0100 Subject: [PATCH 6/9] Update test/snapshots.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Make the snapshot readable Co-authored-by: Philippe Rivière --- test/snapshots.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/test/snapshots.js b/test/snapshots.js index 8996aab..b3e7245 100644 --- a/test/snapshots.js +++ b/test/snapshots.js @@ -15,7 +15,10 @@ export function axisLeftScaleLinearNonNumericRange() { } export function axisLeftTickSizeFunction() { + const scale = scaleLinear([0, 10], [10, 140]); const svg = create("svg"); - svg.append("g").call(axisLeft(scaleLinear()).tickSize(function(d, i) { return i * 2 })); + svg.append("g") + .attr("transform", "translate(20, 0)") + .call(axisLeft(scale).tickSize(function(d, i) { return i * 2 })); return svg.node(); } From 4826e103e00c04a7e5229aea1d61480a7292309b Mon Sep 17 00:00:00 2001 From: Ian Wright Date: Thu, 7 Apr 2022 07:36:23 +0100 Subject: [PATCH 7/9] Update README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Updated DOCS as additional parameters now passed Co-authored-by: Philippe Rivière --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c7b0cd7..8d49489 100644 --- a/README.md +++ b/README.md @@ -191,7 +191,7 @@ This has the advantage of setting the format precision automatically based on th # axis.tickSize([value]) · [Source](https://github.com/d3/d3-axis/blob/master/src/axis.js) -If *value* is a function, it is evaluated for each tick, in order, being passed the current tick datum (d) and the current index (i) and returns the axis. If *value* is a constant, sets the [inner](#axis_tickSizeInner) and [outer](#axis_tickSizeOuter) tick size to the specified value, removes any previously set tick size function and returns the axis. If *value* is not specified, returns the current tick size function (if specified) or the inner tick size, which defaults to 6. +If *value* is a function, it is evaluated for each tick, in order, being passed the current tick datum (*d*), the current index (*i*), and the group of ticks (*nodes*), with *this* as the current DOM element (*nodes*[*i*]), and returns the axis. If *value* is a constant, sets the [inner](#axis_tickSizeInner) and [outer](#axis_tickSizeOuter) tick size to the specified value, removes any previously set tick size function and returns the axis. If *value* is not specified, returns the current tick size function (if specified) or the inner tick size, which defaults to 6. # axis.tickSizeInner([size]) · [Source](https://github.com/d3/d3-axis/blob/master/src/axis.js) From f82f66b407bca2b824777623dc4a51082138eab3 Mon Sep 17 00:00:00 2001 From: Ian Wright Date: Mon, 25 Apr 2022 09:00:10 +0100 Subject: [PATCH 8/9] Consider tickSizeFunction when calculating padding --- src/axis.js | 8 +++- test/snapshots/axisLeftTickSizeFunction.html | 48 ++++++++++---------- 2 files changed, 30 insertions(+), 26 deletions(-) diff --git a/src/axis.js b/src/axis.js index 2940f43..1ad47ab 100644 --- a/src/axis.js +++ b/src/axis.js @@ -69,7 +69,9 @@ function axis(orient, scale) { text = text.merge(tickEnter.append("text") .attr("fill", "currentColor") - .attr(x, k * spacing) + .attr(x, function(d, i, nodes) { + return tickSizeFunction == null ? k * spacing : k * spacing + tickSizeFunction(d, i, nodes) + }) .attr("dy", orient === top ? "0em" : orient === bottom ? "0.71em" : "0.32em")); if (context !== selection) { @@ -102,7 +104,9 @@ function axis(orient, scale) { .attr(x + "2", tickSizeFunction == null ? k * tickSizeInner : tickSizeFunction); text - .attr(x, k * spacing) + .attr(x, function(d, i, nodes) { + return tickSizeFunction == null ? k * spacing : k * spacing + tickSizeFunction(d, i, nodes) + }) .text(format); selection.filter(entering) diff --git a/test/snapshots/axisLeftTickSizeFunction.html b/test/snapshots/axisLeftTickSizeFunction.html index f7d43f2..d413bf9 100644 --- a/test/snapshots/axisLeftTickSizeFunction.html +++ b/test/snapshots/axisLeftTickSizeFunction.html @@ -1,39 +1,39 @@ - - - - 0.0 + + + + 0 - - 0.1 + + 1 - - 0.2 + + 2 - - 0.3 + + 3 - - 0.4 + + 4 - - 0.5 + + 5 - - 0.6 + + 6 - - 0.7 + + 7 - - 0.8 + + 8 - - 0.9 + + 9 - - 1.0 + + 10 \ No newline at end of file From db0dd2e785c55efd53e9bfef40cf81fa2c6da2c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Mon, 16 May 2022 11:25:45 +0200 Subject: [PATCH 9/9] Update src/axis.js --- src/axis.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/axis.js b/src/axis.js index 1ad47ab..00194e2 100644 --- a/src/axis.js +++ b/src/axis.js @@ -69,9 +69,7 @@ function axis(orient, scale) { text = text.merge(tickEnter.append("text") .attr("fill", "currentColor") - .attr(x, function(d, i, nodes) { - return tickSizeFunction == null ? k * spacing : k * spacing + tickSizeFunction(d, i, nodes) - }) + .attr(x, tickSizeFunction == null ? k * spacing : function(d, i, nodes) { return k * spacing + tickSizeFunction(d, i, nodes); }) .attr("dy", orient === top ? "0em" : orient === bottom ? "0.71em" : "0.32em")); if (context !== selection) {