Static Plot.tip marks does not work with JSDOM

[legendre6891]

Hi observableHQ plot team,

It seems like Plot.tip does not work with the JSDom renderer.

For example, the following code

(sample code)

import * as Plot from "@observablehq/plot";
import * as d3 from "d3";
import {JSDOM} from "jsdom";

const aapl = d3.csvParse(await readFile("./aapl.csv", "utf-8"), d3.autoType);
const plot = Plot.plot({
  document: new JSDOM("").window.document,
  y: {grid: true},
  marks: [
    Plot.lineY(aapl, {x: "Date", y: "Close"}),
    Plot.tip(
      [`Apple stock reaches a new high of $133 on Feb. 23, 2015. The release of the first Apple Watch, slated for April, is hotly anticipated.`],
      {x: new Date("2015-02-23"), y: 133, dy: -3, anchor: "bottom"}
    ),
    Plot.tip(
      [`Apple stock drops 8% after the company misses Q2 revenue targets and reports declining iPhone sales. It reaches a two-year low of $90.34 on May 12.`],
      {x: new Date("2016-05-12"), y: 90.34, dy: 3, anchor: "top"}
    )
  ]
})

plot.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns", "http://www.w3.org/2000/svg");
plot.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");

process.stdout.write(plot.outerHTML);

results in an SVG which looks like following.

This example is taken from the documentation, which has the reference rendering with the tips:

---

Possibly related issue: #2160

[Fil]

Not connected to the pointer issue, but to the fact that we need to compute the text dimensions before we can make the box around it.

This is commented here:

plot/src/marks/tip.js

Lines 243 to 250 in 9122f18

	// Wait until the plot is inserted into the page so that we can use getBBox
	// to compute the exact text dimensions. If the SVG is already connected, as
	// when the pointer interaction triggers the re-render, use a faster
	// microtask instead of an animation frame; if this SSR (e.g., JSDOM), skip
	// this step. Perhaps this could be done synchronously; getting the
	// dimensions of the SVG is easy, and although accurate text metrics are
	// hard, we could use approximate heuristics.
	if (index.length) {

There is a todo to maybe "guess" approximative dimensions to do it in SSR contexts such as a JSDOM document.