font-variant on the axes (#606)

* remove font-variant from the global styles; introduce the axis fontVariant option, which defaults to tabular-nums
closes #601

* Update src/axis.js

Co-authored-by: Mike Bostock <mbostock@gmail.com>

* Update src/axis.js

Co-authored-by: Mike Bostock <mbostock@gmail.com>

* fontVariant defaults to tabular-nums on quantitative axes only

* inferFontVariant returns string | undefined

Co-authored-by: Mike Bostock <mbostock@gmail.com>

Author: Fil

README.md

@@ -273,6 +273,7 @@ Plot automatically generates axes for position scales. You can configure these a
 * *scale*.**label** - a string to label the axis
 * *scale*.**labelAnchor** - the label anchor: *top*, *right*, *bottom*, *left*, or *center*
 * *scale*.**labelOffset** - the label position offset (in pixels; default 0, typically for facet axes)
+* *scale*.**fontVariant** - the font-variant attribute for axis ticks; defaults to tabular-nums for quantitative axes.
 
 Top-level options are also supported as shorthand: **grid** (for *x* and *y* only; see [facet.grid](#facet-options)), **label**, **axis**, **inset**, **round**, **align**, and **padding**.
 

src/axes.js

@@ -16,8 +16,8 @@ export function Axes(
   if (!fxScale) fxAxis = null; else if (fxAxis === true) fxAxis = xAxis === "bottom" ? "top" : "bottom";
   if (!fyScale) fyAxis = null; else if (fyAxis === true) fyAxis = yAxis === "left" ? "right" : "left";
   return {
-    ...xAxis && {x: new AxisX({grid, line, label, ...x, axis: xAxis})},
-    ...yAxis && {y: new AxisY({grid, line, label, ...y, axis: yAxis})},
+    ...xAxis && {x: new AxisX({grid, line, label, fontVariant: inferFontVariant(xScale), ...x, axis: xAxis})},
+    ...yAxis && {y: new AxisY({grid, line, label, fontVariant: inferFontVariant(yScale), ...y, axis: yAxis})},
     ...fxAxis && {fx: new AxisX({name: "fx", grid: facetGrid, label: facetLabel, ...fx, axis: fxAxis})},
     ...fyAxis && {fy: new AxisY({name: "fy", grid: facetGrid, label: facetLabel, ...fy, axis: fyAxis})}
   };
@@ -142,3 +142,7 @@ function inferLabel(channels = [], scale, axis, key) {
   }
   return candidate;
 }
+
+function inferFontVariant(scale) {
+  return isOrdinalScale(scale) ? undefined : "tabular-nums";
+}

src/axis.js

@@ -1,6 +1,7 @@
 import {axisTop, axisBottom, axisRight, axisLeft, create, format, utcFormat} from "d3";
 import {formatIsoDate} from "./format.js";
 import {boolean, take, number, string, keyword, maybeKeyword, constant, isTemporal} from "./mark.js";
+import {impliedString} from "./style.js";
 
 export class AxisX {
   constructor({
@@ -10,6 +11,7 @@ export class AxisX {
     tickSize = name === "fx" ? 0 : 6,
     tickPadding = tickSize === 0 ? 9 : 3,
     tickFormat,
+    fontVariant,
     grid,
     label,
     labelAnchor,
@@ -23,6 +25,7 @@ export class AxisX {
     this.tickSize = number(tickSize);
     this.tickPadding = number(tickPadding);
     this.tickFormat = tickFormat;
+    this.fontVariant = impliedString(fontVariant, "normal");
     this.grid = boolean(grid);
     this.label = string(label);
     this.labelAnchor = maybeKeyword(labelAnchor, "labelAnchor", ["center", "left", "right"]);
@@ -49,6 +52,7 @@ export class AxisX {
   ) {
     const {
       axis,
+      fontVariant,
       grid,
       label,
       labelAnchor,
@@ -65,6 +69,7 @@ export class AxisX {
         .call(maybeTickRotate, tickRotate)
         .attr("font-size", null)
         .attr("font-family", null)
+        .attr("font-variant", fontVariant)
         .call(!line ? g => g.select(".domain").remove() : () => {})
         .call(!grid ? () => {}
           : fy ? gridFacetX(index, fy, -ty)
@@ -93,6 +98,7 @@ export class AxisY {
     tickSize = name === "fy" ? 0 : 6,
     tickPadding = tickSize === 0 ? 9 : 3,
     tickFormat,
+    fontVariant,
     grid,
     label,
     labelAnchor,
@@ -106,6 +112,7 @@ export class AxisY {
     this.tickSize = number(tickSize);
     this.tickPadding = number(tickPadding);
     this.tickFormat = tickFormat;
+    this.fontVariant = impliedString(fontVariant, "normal");
     this.grid = boolean(grid);
     this.label = string(label);
     this.labelAnchor = maybeKeyword(labelAnchor, "labelAnchor", ["center", "top", "bottom"]);
@@ -130,6 +137,7 @@ export class AxisY {
   ) {
     const {
       axis,
+      fontVariant,
       grid,
       label,
       labelAnchor,
@@ -146,6 +154,7 @@ export class AxisY {
         .call(maybeTickRotate, tickRotate)
         .attr("font-size", null)
         .attr("font-family", null)
+        .attr("font-variant", fontVariant)
         .call(!line ? g => g.select(".domain").remove() : () => {})
         .call(!grid ? () => {}
           : fx ? gridFacetY(index, fx, -tx)

src/legends/ramp.js

@@ -23,7 +23,6 @@ export function legendRamp(color, {
       .attr("class", className)
       .attr("font-family", "system-ui, sans-serif")
       .attr("font-size", 10)
-      .attr("font-variant", "tabular-nums")
       .attr("width", width)
       .attr("height", height)
       .attr("viewBox", `0 0 ${width} ${height}`)

src/legends/swatches.js

@@ -83,7 +83,6 @@ export function legendSwatches(color, {
         .${className} {
           font-family: system-ui, sans-serif;
           font-size: 10px;
-          font-variant: tabular-nums;
           margin-bottom: 0.5em;${marginLeft === undefined ? "" : `
           margin-left: ${+marginLeft}px;`}${width === undefined ? "" : `
           width: ${width}px;`}

src/plot.js

@@ -70,7 +70,6 @@ export function plot(options = {}) {
       .attr("fill", "currentColor")
       .attr("font-family", "system-ui, sans-serif")
       .attr("font-size", 10)
-      .attr("font-variant", "tabular-nums")
       .attr("text-anchor", "middle")
       .attr("width", width)
       .attr("height", height)