我读到使用jsdomObservable Plot(从D3js派生的模块)工作在Nodejs.
然而，关于这一点的例子很少，我不能适当地改编我找到的那些。
下面是我试图修改的代码:
import * as Plot from "@observablehq/plot";
import jsdom from "jsdom";
const { JSDOM } = jsdom;
const sales = [
{units: 10, fruit: "fig"},
{units: 20, fruit: "date"},
{units: 40, fruit: "plum"},
{units: 30, fruit: "plum"}
];
Plot.dot(sales, {x: "units", y: "fruit"}).plot();
我尝试了不同的东西，比如添加:
import {select} from "d3-selection";
Plot.select(JSDOM.window.document.body).dot(sales, {x: "units", y: "fruit"}).plot();
试图复制d3在这里所做的。
我也看到了这个可能包含答案，但这是不理解像我这样的javascript初学者。
我应该如何调整我的代码?
对于任何寻找这个的人，我有一个小库来处理这个浏览器执行，并使用剧作家在弹出窗口中打开结果图表:https://github.com/mhkeller/plot
我终于能够像这样获得我想要的:
import http from 'http';
import * as Plot from "@observablehq/plot";
import {JSDOM} from "jsdom";
const jsdom = new JSDOM(`
<!DOCTYPE html>
<head><meta charset="UTF-8"></head>
<body><div class='container'><figure id='graphic'>
</figure></div></body>`);
const sales = [
{units: 10, fruit: "fig"},
{units: 20, fruit: "date"},
{units: 40, fruit: "plum"},
{units: 30, fruit: "plum"}
];
jsdom.window.document.getElementById('graphic')
.appendChild(Plot.dot(sales, {x: "units", y: "fruit"})
.plot({document: jsdom.window.document})
);
http.createServer(function (req, res) {
let html = jsdom.serialize();
res.end(html);
}).listen(8080);
jsdom对象需要创建较少的随机和我使用Plot的方式。Dot with jsdom是不正确的。我还必须使用http模块在浏览器中渲染图形，并在localhost:8080/访问它。