fix NaN ticks crashing (observablehq#1335)

* Guard against formatDefault returning undefined (it always returns a string except when the value is NaN)

Closes observablehq#1334

related to observablehq#493

* coalesce null to empty string

* DRY

---------

Co-authored-by: Mike Bostock <[email protected]>

Author: 2 people

src/marks/text.js

@@ -137,7 +137,7 @@ function applyMultilineText(selection, mark, T, TL) {
   if (!T) return;
   const {lineAnchor, lineHeight, textOverflow, splitLines, clipLine} = mark;
   selection.each(function (i) {
-    const lines = splitLines(formatDefault(T[i])).map(clipLine);
+    const lines = splitLines(formatDefault(T[i]) ?? "").map(clipLine);
     const n = lines.length;
     const y = lineAnchor === "top" ? 0.71 : lineAnchor === "bottom" ? 1 - n : (164 - n * 100) / 200;
     if (n > 1) {

test/output/penguinNA1.svg

@@ -188,6 +188,7 @@ export * from "./penguin-mass-sex-species.js";
 export * from "./penguin-mass-sex.js";
 export * from "./penguin-mass-species.js";
 export * from "./penguin-mass.js";
+export * from "./penguin-na.js";
 export * from "./penguin-quantile-unknown.js";
 export * from "./penguin-sex-mass-culmen-species.js";
 export * from "./penguin-sex.js";

test/output/penguinNA2.svg

@@ -0,0 +1,23 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+async function penguinNA(tickFormat: (x: number) => any = undefined) {
+  const sample = await d3.csv<any>("data/penguins.csv", d3.autoType);
+  const V = Plot.valueof(sample, "body_mass_g");
+  const [min, max] = d3.extent(V);
+  return Plot.tickX(sample, {x: V, stroke: (d) => (d.body_mass_g ? "black" : "red")}).plot({
+    x: {unknown: 10, ticks: [NaN, ...d3.ticks(min, max, 7)], tickFormat}
+  });
+}
+
+export async function penguinNA1() {
+  return penguinNA();
+}
+
+export async function penguinNA2() {
+  return penguinNA((d) => (isNaN(d) ? "N/A" : d));
+}
+
+export async function penguinNA3() {
+  return penguinNA((d) => d);
+}