如何在Node.js中适配jsdom使用Observable Plot？求正确代码方案

Observable Plot原本是为浏览器环境设计的，在Node.js中运行必须借助jsdom模拟DOM环境，核心是让Plot能访问到模拟的document对象，以下是正确的实现步骤：

核心修正点 #

• Observable Plot没有select方法，不要照搬D3的调用方式
• 调用plot()方法时必须显式传入模拟的document参数，或者全局替换Plot的document指向

完整可运行代码 #

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

// 创建包含基本HTML结构的DOM实例
const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
const { document } = dom.window;

// 示例数据
const sales = [
  {units: 10, fruit: "fig"},
  {units: 20, fruit: "date"},
  {units: 40, fruit: "plum"},
  {units: 30, fruit: "plum"}
];

// 生成图表时传入模拟的document，让Plot能创建DOM元素
const chartElement = Plot.dot(sales, {x: "units", y: "fruit"}).plot({document});

// 将图表元素添加到模拟的body中（可选，用于获取完整HTML）
document.body.appendChild(chartElement);

// 获取生成的SVG HTML字符串，可用于保存文件或后续处理
const svgContent = document.body.innerHTML;
console.log(svgContent);

// 若要保存为本地SVG文件，可使用fs模块
// import fs from 'fs/promises';
// await fs.writeFile('fruit-sales.svg', svgContent);

代码说明 #

1. 创建DOM环境：用JSDOM生成包含body的HTML结构，确保Plot有可操作的DOM上下文
2. 传入document参数：在plot()方法中指定document为模拟的DOM对象，这是让Plot在Node.js中运行的关键
3. 获取或保存结果：生成的图表是SVG元素，可通过innerHTML获取其HTML代码，再保存为文件或做其他处理

内容的提问来源于stack exchange，提问作者user20580833