From 01aafafd2e79cfbe0ec29486042a8689bf8652b2 Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Mon, 1 May 2023 19:08:09 -0700 Subject: [PATCH] axis lineInset and textInset --- docs/features/scales.md | 3 ++- docs/marks/axis.md | 3 ++- src/marks/axis.d.ts | 2 +- src/marks/axis.js | 16 ++++++++-------- src/plot.js | 6 ++++-- src/scales.d.ts | 10 +++++----- 6 files changed, 22 insertions(+), 18 deletions(-) diff --git a/docs/features/scales.md b/docs/features/scales.md index d4e0b2399b..0cf49b30c6 100644 --- a/docs/features/scales.md +++ b/docs/features/scales.md @@ -948,7 +948,8 @@ Plot automatically generates [axis](../marks/axis.md) and optionally [grid](../m * **line** - if true, draw the axis line (only for *x* and *y*) * **label** - a string to label the axis * **labelAnchor** - the label anchor: *top*, *right*, *bottom*, *left*, or *center* -* **labelOffset** - the label position offset (in pixels; default depends on margins and orientation) +* **lineInset** - the label line inset (in pixels; default 3) +* **textInset** - the label text inset (in pixels; default 3) * **fontVariant** - the font-variant attribute for ticks; defaults to *tabular-nums* if quantitative * **ariaLabel** - a short label representing the axis in the accessibility tree * **ariaDescription** - a textual description for the axis diff --git a/docs/marks/axis.md b/docs/marks/axis.md index 295478fb6c..7e7bb7f479 100644 --- a/docs/marks/axis.md +++ b/docs/marks/axis.md @@ -357,7 +357,8 @@ In addition to the [standard mark options](../features/marks.md), the axis mark * **fontVariant** - the font-variant attribute for ticks; defaults to tabular-nums for quantitative axes * **label** - a string to label the axis; defaults to the scale’s label, perhaps with an arrow * **labelAnchor** - the label anchor: *top*, *right*, *bottom*, *left*, or *center* -* **labelOffset** - the label position offset (in pixels; default depends on margins and orientation) +* **lineInset** - the label line inset (in pixels; default 3) +* **textInset** - the label text inset (in pixels; default 3) * **color** - the color of the ticks and labels (defaults to *currentColor*) * **textStroke** - the color of the stroke around tick labels (defaults to *none*) * **textStrokeOpacity** - the opacity of the stroke around tick labels diff --git a/src/marks/axis.d.ts b/src/marks/axis.d.ts index c0e4babba4..cdbf4526bd 100644 --- a/src/marks/axis.d.ts +++ b/src/marks/axis.d.ts @@ -8,7 +8,7 @@ import type {TickXOptions, TickYOptions} from "./tick.js"; type GridScaleOptions = Pick; /** The subset of scale options for axes. */ -type AxisScaleOptions = Pick; // prettier-ignore +type AxisScaleOptions = Pick; // prettier-ignore /** Options for the grid marks. */ export interface GridOptions extends GridScaleOptions { diff --git a/src/marks/axis.js b/src/marks/axis.js index e9f7402445..9515bd894f 100644 --- a/src/marks/axis.js +++ b/src/marks/axis.js @@ -85,8 +85,9 @@ function axisKy( marginBottom = margin === undefined ? 20 : margin, marginLeft = margin === undefined ? (anchor === "left" ? 40 : 0) : margin, label, - labelOffset, labelAnchor, + lineInset = 3, + textInset = 3, ...options } ) { @@ -133,7 +134,6 @@ function axisKy( const scale = scales[k]; const {marginTop, marginRight, marginBottom, marginLeft} = (k === "y" && dimensions.inset) || dimensions; const cla = labelAnchor ?? (scale.bandwidth ? "center" : "top"); - const clo = labelOffset ?? (anchor === "right" ? marginRight : marginLeft) - 3; if (cla === "center") { this.textAnchor = undefined; // middle this.lineAnchor = anchor === "right" ? "bottom" : "top"; @@ -145,8 +145,8 @@ function axisKy( this.frameAnchor = `${cla}-${anchor}`; this.rotate = 0; } - this.dy = cla === "top" ? 3 - marginTop : cla === "bottom" ? marginBottom - 3 : 0; - this.dx = anchor === "right" ? clo : -clo; + this.dy = cla === "top" ? lineInset - marginTop : cla === "bottom" ? marginBottom - lineInset : 0; + this.dx = anchor === "right" ? marginRight - textInset : textInset - marginLeft; this.ariaLabel = `${k}-axis label`; return { facets: [[0]], @@ -189,7 +189,8 @@ function axisKx( marginLeft = margin === undefined ? 20 : margin, label, labelAnchor, - labelOffset, + lineInset = 3, + textInset = 3, ...options } ) { @@ -236,7 +237,6 @@ function axisKx( const scale = scales[k]; const {marginTop, marginRight, marginBottom, marginLeft} = (k === "x" && dimensions.inset) || dimensions; const cla = labelAnchor ?? (scale.bandwidth ? "center" : "right"); - const clo = labelOffset ?? (anchor === "top" ? marginTop : marginBottom) - 3; if (cla === "center") { this.frameAnchor = anchor; this.textAnchor = undefined; // middle @@ -245,8 +245,8 @@ function axisKx( this.textAnchor = cla === "right" ? "end" : "start"; } this.lineAnchor = anchor; - this.dy = anchor === "top" ? -clo : clo; - this.dx = cla === "right" ? marginRight - 3 : cla === "left" ? 3 - marginLeft : 0; + this.dy = anchor === "top" ? lineInset - marginTop : marginBottom - lineInset; + this.dx = cla === "right" ? marginRight - textInset : cla === "left" ? textInset - marginLeft : 0; this.ariaLabel = `${k}-axis label`; return { facets: [[0]], diff --git a/src/plot.js b/src/plot.js index f960184830..bb6f825d9d 100644 --- a/src/plot.js +++ b/src/plot.js @@ -529,7 +529,8 @@ function axisOptions( ariaDescription, label = defaults.label, labelAnchor, - labelOffset + lineInset, + textInset } ) { return { @@ -546,7 +547,8 @@ function axisOptions( ariaDescription, label, labelAnchor, - labelOffset + lineInset, + textInset }; } diff --git a/src/scales.d.ts b/src/scales.d.ts index dbefe36c3f..2240120855 100644 --- a/src/scales.d.ts +++ b/src/scales.d.ts @@ -608,11 +608,11 @@ export interface ScaleOptions extends ScaleDefaults { */ labelAnchor?: "top" | "right" | "bottom" | "left" | "center"; - /** - * The axis **label** position offset (in pixels); default depends on margins - * and orientation. - */ - labelOffset?: number; + /** The axis label line inset (in pixels); defaults to 3. */ + lineInset?: number; + + /** The axis label text inset (in pixels); defaults to 3. */ + textInset?: number; /** * If true, draw a line along the axis; if false (default), do not.