如何在Nodejs中使用可观察图？

v1uwarro 于 2022-12-03 发布在 Node.js

关注(0)|答案(1)|浏览(213)

我读到，使用jsdom是Observable 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所做的。
我还看到了this，其中可能包含答案，但这是无法理解的javascript初学者喜欢我。
我应该如何修改我的代码？

node.js

来源：https://stackoverflow.com/questions/74573576/how-to-use-observable-plot-in-nodejs

1条答案

按热度按时间

9lowa7mx1#

我终于能够这样获得我想要的东西：

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和jsdom的方式是不正确的，我还必须使用http模块在浏览器中呈现图形，并在localhost:8080/下访问它。

赞(0）回复(0）举报 2022-12-03

我来回答

如何在Nodejs中使用可观察图？

1条答案

相关问题

热门标签

最新问答