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

Jump to bottom

multiline tick labels #83

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

multiline tick labels #83

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4a1b81a
multiline tick labels
Fil Dec 11, 2021
0a12a02
lockfile
Fil Dec 11, 2021
f2be0ff
axis.tickMultiline, axis.tickNoRepeat
Fil Dec 13, 2021
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
6 changes: 6 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,12 @@ axis.ticks(10, ",f");

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

Multiline tick labels can be generated by returning a multiline string. Each line of the string beyond the first will be placed in a tspan element 1.2em below the preceding line (or above in the case of a top-oriented axis). If such a line starts with a question mark, the label will be suppressed when it repeats the label at the same level on the preceding tick. For example, the following tick format will display a line with the months’ short names, then a line with the year, without repeating the year for two consecutive months:

```js
axis.tickFormat(d3.utcFormat("%b\n?%Y"));
```

<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)

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.
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"devDependencies": {
"d3-scale": "2 - 4",
"d3-selection": "1 - 3",
"d3-time-format": "4",
"eslint": "7",
"js-beautify": "1",
"jsdom": "16",
Expand Down
22 changes: 20 additions & 2 deletions src/axis.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,8 +101,7 @@ function axis(orient, scale) {
.attr(x + "2", k * tickSizeInner);

text
.attr(x, k * spacing)
.text(format);
.call(maybeMultilineText(format, orient, x, k * spacing));

selection.filter(entering)
.attr("fill", "none")
Expand Down Expand Up @@ -172,3 +171,22 @@ export function axisBottom(scale) {
export function axisLeft(scale) {
return axis(left, scale);
}

function maybeMultilineText(format, orient, x, space) {
const repeats = [];
const lines = [];
return (text) => {
text
.attr(x, space)
.text((d, i) => {
const cur = format(d) || "";
Fil marked this conversation as resolved.
Show resolved Hide resolved
lines[i] = cur.split("\n");
Fil marked this conversation as resolved.
Show resolved Hide resolved
return lines[i].shift();
}).selectAll("tspan")
.data((d, i) => lines[i])
.join("tspan")
.text((d, j) => d[0] === "?" ? d === repeats[j] ? " " : (repeats[j] = d).slice(1) : d)
.attr("x", orient === left || orient === right ? space : 0)
.attr("dy", orient === top ? "-1.2em" : "1.2em");
};
}
37 changes: 35 additions & 2 deletions test/snapshots.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {scaleLinear} from "d3-scale";
import {scaleLinear, scaleUtc} from "d3-scale";
import {create} from "d3-selection";
import {axisLeft} from "../src/index.js";
import {utcFormat} from "d3-time-format";
import {axisBottom, axisLeft, axisRight, axisTop} from "../src/index.js";

export function axisLeftScaleLinear() {
const svg = create("svg");
Expand All @@ -13,3 +14,35 @@ export function axisLeftScaleLinearNonNumericRange() {
svg.append("g").call(axisLeft(scaleLinear().range([0, "500"])));
return svg.node();
}

export function axisBottomScaleLinearMultiLine() {
const x = scaleUtc([new Date(Date.UTC(2000, 4, 1)), new Date(Date.UTC(2002, 10, 1))], [10, 290]);
const axis = axisBottom(x).tickFormat(utcFormat("%b\n?%Y"));
const svg = create("svg");
svg.append("g").call(axis);
return svg.node();
}

export function axisTopScaleLinearMultiLine() {
const x = scaleUtc([new Date(Date.UTC(2000, 4, 1)), new Date(Date.UTC(2002, 10, 1))], [10, 290]);
const axis = axisTop(x).tickFormat(utcFormat("%b\n?%Y"));
const svg = create("svg");
svg.append("g").attr("transform", "translate(0,40)").call(axis);
return svg.node();
}

export function axisLeftScaleLinearMultiLine() {
const x = scaleUtc([new Date(Date.UTC(2000, 4, 1)), new Date(Date.UTC(2002, 10, 1))], [10, 290]);
const axis = axisLeft(x).tickFormat(utcFormat("%b\n?%Y"));
const svg = create("svg");
svg.append("g").attr("transform", "translate(40,0)").call(axis);
return svg.node();
}

export function axisRightScaleLinearMultiLine() {
const x = scaleUtc([new Date(Date.UTC(2000, 4, 1)), new Date(Date.UTC(2002, 10, 1))], [10, 290]);
const axis = axisRight(x).tickFormat(utcFormat("%b\n?%Y"));
const svg = create("svg");
svg.append("g").attr("transform", "translate(40,0)").call(axis);
return svg.node();
}
36 changes: 36 additions & 0 deletions test/snapshots/axisBottomScaleLinearMultiLine.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<svg>
<g fill="none" font-size="10" font-family="sans-serif" text-anchor="middle">
<path class="domain" stroke="currentColor" d="M10.5,6V0.5H290.5V6"></path>
<g class="tick" opacity="1" transform="translate(29.187089715536104,0)">
<line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Jul<tspan x="0" dy="1.2em">2000</tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(57.37089715536105,0)">
<line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Oct<tspan x="0" dy="1.2em"> </tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(85.554704595186,0)">
<line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Jan<tspan x="0" dy="1.2em">2001</tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(113.1258205689278,0)">
<line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Apr<tspan x="0" dy="1.2em"> </tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(141.00328227571117,0)">
<line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Jul<tspan x="0" dy="1.2em"> </tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(169.1870897155361,0)">
<line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Oct<tspan x="0" dy="1.2em"> </tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(197.37089715536106,0)">
<line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Jan<tspan x="0" dy="1.2em">2002</tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(224.94201312910283,0)">
<line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Apr<tspan x="0" dy="1.2em"> </tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(252.81947483588624,0)">
<line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Jul<tspan x="0" dy="1.2em"> </tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(281.0032822757111,0)">
<line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Oct<tspan x="0" dy="1.2em"> </tspan></text>
</g>
</g>
</svg>
36 changes: 36 additions & 0 deletions test/snapshots/axisLeftScaleLinearMultiLine.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<svg>
<g transform="translate(40,0)" fill="none" font-size="10" font-family="sans-serif" text-anchor="end">
<path class="domain" stroke="currentColor" d="M-6,10.5H0.5V290.5H-6"></path>
<g class="tick" opacity="1" transform="translate(0,29.187089715536104)">
<line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">Jul<tspan x="-9" dy="1.2em">2000</tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(0,57.37089715536105)">
<line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">Oct<tspan x="-9" dy="1.2em"> </tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(0,85.554704595186)">
<line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">Jan<tspan x="-9" dy="1.2em">2001</tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(0,113.1258205689278)">
<line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">Apr<tspan x="-9" dy="1.2em"> </tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(0,141.00328227571117)">
<line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">Jul<tspan x="-9" dy="1.2em"> </tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(0,169.1870897155361)">
<line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">Oct<tspan x="-9" dy="1.2em"> </tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(0,197.37089715536106)">
<line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">Jan<tspan x="-9" dy="1.2em">2002</tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(0,224.94201312910283)">
<line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">Apr<tspan x="-9" dy="1.2em"> </tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(0,252.81947483588624)">
<line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">Jul<tspan x="-9" dy="1.2em"> </tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(0,281.0032822757111)">
<line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">Oct<tspan x="-9" dy="1.2em"> </tspan></text>
</g>
</g>
</svg>
36 changes: 36 additions & 0 deletions test/snapshots/axisRightScaleLinearMultiLine.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<svg>
<g transform="translate(40,0)" fill="none" font-size="10" font-family="sans-serif" text-anchor="start">
<path class="domain" stroke="currentColor" d="M6,10.5H0.5V290.5H6"></path>
<g class="tick" opacity="1" transform="translate(0,29.187089715536104)">
<line stroke="currentColor" x2="6"></line><text fill="currentColor" x="9" dy="0.32em">Jul<tspan x="9" dy="1.2em">2000</tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(0,57.37089715536105)">
<line stroke="currentColor" x2="6"></line><text fill="currentColor" x="9" dy="0.32em">Oct<tspan x="9" dy="1.2em"> </tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(0,85.554704595186)">
<line stroke="currentColor" x2="6"></line><text fill="currentColor" x="9" dy="0.32em">Jan<tspan x="9" dy="1.2em">2001</tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(0,113.1258205689278)">
<line stroke="currentColor" x2="6"></line><text fill="currentColor" x="9" dy="0.32em">Apr<tspan x="9" dy="1.2em"> </tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(0,141.00328227571117)">
<line stroke="currentColor" x2="6"></line><text fill="currentColor" x="9" dy="0.32em">Jul<tspan x="9" dy="1.2em"> </tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(0,169.1870897155361)">
<line stroke="currentColor" x2="6"></line><text fill="currentColor" x="9" dy="0.32em">Oct<tspan x="9" dy="1.2em"> </tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(0,197.37089715536106)">
<line stroke="currentColor" x2="6"></line><text fill="currentColor" x="9" dy="0.32em">Jan<tspan x="9" dy="1.2em">2002</tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(0,224.94201312910283)">
<line stroke="currentColor" x2="6"></line><text fill="currentColor" x="9" dy="0.32em">Apr<tspan x="9" dy="1.2em"> </tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(0,252.81947483588624)">
<line stroke="currentColor" x2="6"></line><text fill="currentColor" x="9" dy="0.32em">Jul<tspan x="9" dy="1.2em"> </tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(0,281.0032822757111)">
<line stroke="currentColor" x2="6"></line><text fill="currentColor" x="9" dy="0.32em">Oct<tspan x="9" dy="1.2em"> </tspan></text>
</g>
</g>
</svg>
36 changes: 36 additions & 0 deletions test/snapshots/axisTopScaleLinearMultiLine.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<svg>
<g transform="translate(0,40)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle">
<path class="domain" stroke="currentColor" d="M10.5,-6V0.5H290.5V-6"></path>
<g class="tick" opacity="1" transform="translate(29.187089715536104,0)">
<line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">Jul<tspan x="0" dy="-1.2em">2000</tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(57.37089715536105,0)">
<line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">Oct<tspan x="0" dy="-1.2em"> </tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(85.554704595186,0)">
<line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">Jan<tspan x="0" dy="-1.2em">2001</tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(113.1258205689278,0)">
<line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">Apr<tspan x="0" dy="-1.2em"> </tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(141.00328227571117,0)">
<line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">Jul<tspan x="0" dy="-1.2em"> </tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(169.1870897155361,0)">
<line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">Oct<tspan x="0" dy="-1.2em"> </tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(197.37089715536106,0)">
<line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">Jan<tspan x="0" dy="-1.2em">2002</tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(224.94201312910283,0)">
<line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">Apr<tspan x="0" dy="-1.2em"> </tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(252.81947483588624,0)">
<line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">Jul<tspan x="0" dy="-1.2em"> </tspan></text>
</g>
<g class="tick" opacity="1" transform="translate(281.0032822757111,0)">
<line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">Oct<tspan x="0" dy="-1.2em"> </tspan></text>
</g>
</g>
</svg>
7 changes: 7 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -397,6 +397,13 @@ cssstyle@^2.3.0:
dependencies:
d3-time "1 - 3"

d3-time-format@4:
version "4.1.0"
resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a"
integrity sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==
dependencies:
d3-time "1 - 3"

"d3-time@1 - 3", "[email protected] - 3":
version "3.0.0"
resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.0.0.tgz#65972cb98ae2d4954ef5c932e8704061335d4975"
Expand Down