使用最新 D3 版本从 node.js 生成 PNG 的最佳方法？

Question

我想使用 d3 服务器端直接或通过 SVG 创建 PNG 文件。 我可以在这里找到许多关于如何实现这一点的讨论，但它们都是多年前的，指的是 d3 v3 或 v4，node 回到 v10。 是否仍然有必要假装我们在浏览器中，使用类似jsdom 的东西提供伪 DOM？ 替代d3-node 系列软件包实际上仍然有效吗？它们大多有几年没有更新了。

这是我在 macOS 11.6 上节点 17.0.1、d3 7.1.1、d3-node 2.2.3 上的 MNWE：

const fs = require('fs');
const d3 = require('d3-node')().d3;
const output = require('d3node-output');
const d3nBar = require('d3node-barchart');
// const d3nPie = require('d3node-piechart');
// const csvString = fs.readFileSync('mentions.csv').toString();
const csvString=`key,value
Bob,33
Robin,12
...
Stacy,20
Charles,13
Mary,29`
const csvData = d3.csvParse(csvString);

const selector = `#chart`
const container = `<div id="container"><h2>Bar Chart</h2><div id="chart"></div></div>`
const style = `.bar{fill: steelblue;}
.bar:hover{fill: brown;}
.axis{font: 10px sans-serif;}
.axis path,.axis line{fill: none;stroke: #000;shape-rendering: crispEdges;}
.x.axis path{display: none;}`

// create output files
// const pie = d3nPie(csvData, selector, container, style)
const bar = d3nBar(csvData, selector, container, style)
output('output', bar);

d3node-barchart 库中出现的倒数第二行出现以下错误：

/Users/j/Dropbox/NP-other-tests/node_modules/d3node-barchart/index.js:55
  x.domain(data.map((d) => d.key));
                ^

TypeError: Cannot read properties of undefined (reading 'map')
    at bar (/Users/j/Dropbox/NP-other-tests/node_modules/d3node-barchart/index.js:55:17)
    at Object.<anonymous> (/Users/j/Dropbox/NP-other-tests/d3test.cjs:45:13)
    at Module._compile (node:internal/modules/cjs/loader:1095:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1147:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47

Answer 1

调查

错误消息告诉 d3n-barchart 没有在它预期的位置找到 data。

查看引发错误的文件：node_modules/d3node-barchart/index.js，看来函数 bar 需要一个对象作为参数，而不是数据数组作为第一个参数。

function bar({
  data,
  selector: _selector = '#chart',
  ...

README of d3n-bar 中显示的语法似乎不正确。

如库的example file所示，函数d3nBar以一个对象为输入参数，具有data属性。

解决方案

应用 d3n-barchart 示例文件中的语法解决了错误：

const bar = d3nBar({
    data: csvData
    , selector: selector
    , container: container
    , style: style
})

您可能想要更正 d3n-barchart 的 README 文件并提交拉取请求，以帮助未来的用户正确获取他们的代码 :)