font-variant for legends (#608)

Author: mbostock

src/axes.js

@@ -143,6 +143,6 @@ function inferLabel(channels = [], scale, axis, key) {
   return candidate;
 }
 
-function inferFontVariant(scale) {
+export function inferFontVariant(scale) {
   return isOrdinalScale(scale) ? undefined : "tabular-nums";
 }

src/legends/ramp.js

@@ -1,6 +1,7 @@
 import {create, quantize, interpolateNumber, piecewise, format, scaleBand, scaleLinear, axisBottom} from "d3";
+import {inferFontVariant} from "../axes.js";
 import {interpolatePiecewise} from "../scales/quantitative.js";
-import {applyInlineStyles, maybeClassName} from "../style.js";
+import {applyInlineStyles, impliedString, maybeClassName} from "../style.js";
 
 export function legendRamp(color, {
   label = color.label,
@@ -14,6 +15,7 @@ export function legendRamp(color, {
   style,
   ticks = (width - marginLeft - marginRight) / 64,
   tickFormat,
+  fontVariant = inferFontVariant(color),
   round = true,
   className
 }) {
@@ -141,6 +143,7 @@ export function legendRamp(color, {
           .tickValues(Array.isArray(ticks) ? ticks : null))
       .attr("font-size", null)
       .attr("font-family", null)
+      .attr("font-variant", impliedString(fontVariant, "normal"))
       .call(tickAdjust)
       .call(g => g.select(".domain").remove())
       .call(label === undefined ? () => {} : g => g.append("text")

src/legends/swatches.js

@@ -1,10 +1,12 @@
 import {create} from "d3";
+import {inferFontVariant} from "../axes.js";
 import {maybeTickFormat} from "../axis.js";
-import {applyInlineStyles, maybeClassName} from "../style.js";
+import {applyInlineStyles, impliedString, maybeClassName} from "../style.js";
 
 export function legendSwatches(color, {
   columns,
   tickFormat,
+  fontVariant = inferFontVariant(color),
   // TODO label,
   swatchSize = 15,
   swatchWidth = swatchSize,
@@ -96,6 +98,7 @@ export function legendSwatches(color, {
         }
         ${extraStyle}
       `))
+      .style("font-variant", impliedString(fontVariant, "normal"))
       .call(applyInlineStyles, style)
     .node();
 }