Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

axis.tickSize accepts a function #84

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

axis.tickSize accepts a function #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ffc36a7
axis.tickSize accepts a function
ian-infogrid Apr 6, 2022
a3e89d2
Update src/axis.js
IPWright83 Apr 6, 2022
d998ef4
Update test/axis-test.js
IPWright83 Apr 6, 2022
1459604
Update test/axis-test.js
IPWright83 Apr 6, 2022
3938926
Update src/axis.js
IPWright83 Apr 6, 2022
272cee2
Update test/snapshots.js
IPWright83 Apr 7, 2022
4826e10
Update README.md
IPWright83 Apr 7, 2022
f82f66b
Consider tickSizeFunction when calculating padding
ian-infogrid Apr 25, 2022
db0dd2e
Update src/axis.js
Fil May 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,9 +189,9 @@ axis.ticks(10, ",f");

This has the advantage of setting the format precision automatically based on the tick interval.

<a name="axis_tickSize" href="#axis_tickSize">#</a> <i>axis</i>.<b>tickSize</b>([<i>size</i>]) · [Source](https://github.com/d3/d3-axis/blob/master/src/axis.js)
<a name="axis_tickSize" href="#axis_tickSize">#</a> <i>axis</i>.<b>tickSize</b>([<i>value</i>]) · [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*), 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.

<a name="axis_tickSizeInner" href="#axis_tickSizeInner">#</a> <i>axis</i>.<b>tickSizeInner</b>([<i>size</i>]) · [Source](https://github.com/d3/d3-axis/blob/master/src/axis.js)

Expand Down
11 changes: 7 additions & 4 deletions src/axis.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -68,7 +69,7 @@ function axis(orient, scale) {

text = text.merge(tickEnter.append("text")
.attr("fill", "currentColor")
.attr(x, k * spacing)
.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) {
Expand Down Expand Up @@ -98,10 +99,12 @@ function axis(orient, scale) {
.attr("transform", function(d) { return transform(position(d) + offset); });

line
.attr(x + "2", k * tickSizeInner);
.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)
Expand Down Expand Up @@ -135,7 +138,7 @@ function axis(orient, scale) {
};

axis.tickSize = function(_) {
return arguments.length ? (tickSizeInner = tickSizeOuter = +_, axis) : tickSizeInner;
return arguments.length ? (typeof _ === "function" ? (tickSizeInner = tickSizeOuter = null, tickSizeFunction = _, axis) : (tickSizeFunction = null, tickSizeInner = tickSizeOuter = +_, axis)) : tickSizeFunction || tickSizeInner;
};

axis.tickSizeInner = function(_) {
Expand Down
11 changes: 11 additions & 0 deletions test/axis-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = (d, i) => i * 2;
const a = axisLeft(scaleLinear()).tickSize(v);
assert.strictEqual(a.tickSize(), v);
});
9 changes: 9 additions & 0 deletions test/snapshots.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,12 @@ export function axisLeftScaleLinearNonNumericRange() {
svg.append("g").call(axisLeft(scaleLinear().range([0, "500"])));
return svg.node();
}

export function axisLeftTickSizeFunction() {
const scale = scaleLinear([0, 10], [10, 140]);
const svg = create("svg");
svg.append("g")
.attr("transform", "translate(20, 0)")
.call(axisLeft(scale).tickSize(function(d, i) { return i * 2 }));
return svg.node();
}
39 changes: 39 additions & 0 deletions test/snapshots/axisLeftTickSizeFunction.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<svg>
<g transform="translate(20, 0)" fill="none" font-size="10" font-family="sans-serif" text-anchor="end">
<path class="domain" stroke="currentColor" d="M0.5,10.5V140.5"></path>
<g class="tick" opacity="1" transform="translate(0,10.5)">
<line stroke="currentColor" x2="0"></line><text fill="currentColor" x="-3" dy="0.32em">0</text>
</g>
<g class="tick" opacity="1" transform="translate(0,23.5)">
<line stroke="currentColor" x2="2"></line><text fill="currentColor" x="-1" dy="0.32em">1</text>
</g>
<g class="tick" opacity="1" transform="translate(0,36.5)">
<line stroke="currentColor" x2="4"></line><text fill="currentColor" x="1" dy="0.32em">2</text>
</g>
<g class="tick" opacity="1" transform="translate(0,49.5)">
<line stroke="currentColor" x2="6"></line><text fill="currentColor" x="3" dy="0.32em">3</text>
</g>
<g class="tick" opacity="1" transform="translate(0,62.5)">
<line stroke="currentColor" x2="8"></line><text fill="currentColor" x="5" dy="0.32em">4</text>
</g>
<g class="tick" opacity="1" transform="translate(0,75.5)">
<line stroke="currentColor" x2="10"></line><text fill="currentColor" x="7" dy="0.32em">5</text>
</g>
<g class="tick" opacity="1" transform="translate(0,88.5)">
<line stroke="currentColor" x2="12"></line><text fill="currentColor" x="9" dy="0.32em">6</text>
</g>
<g class="tick" opacity="1" transform="translate(0,101.5)">
<line stroke="currentColor" x2="14"></line><text fill="currentColor" x="11" dy="0.32em">7</text>
</g>
<g class="tick" opacity="1" transform="translate(0,114.5)">
<line stroke="currentColor" x2="16"></line><text fill="currentColor" x="13" dy="0.32em">8</text>
</g>
<g class="tick" opacity="1" transform="translate(0,127.5)">
<line stroke="currentColor" x2="18"></line><text fill="currentColor" x="15" dy="0.32em">9</text>
</g>
<g class="tick" opacity="1" transform="translate(0,140.5)">
<line stroke="currentColor" x2="20"></line><text fill="currentColor" x="17" dy="0.32em">10</text>
</g>
</g>
</svg>