我想使用 d3 服務器端直接或通過 SVG 創建 PNG 檔案。我可以在這里找到許多關于如何實作這一點的討論，但它們都是多年前的，指的是d3v3 或 v4，然后node又回到 v10。是否仍然需要假裝我們在瀏覽器中，使用類似的東西提供偽 DOM jsdom？替代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
uj5u.com熱心網友回復：
調查
錯誤訊息告訴 d3n-barchart 沒有找到data它期望的位置。
查看拋出錯誤的檔案：node_modules/d3node-barchart/index.js，似乎該函式bar需要一個物件作為引數，而不是資料陣列作為第一個引數。
function bar({
data,
selector: _selector = '#chart',
...
d3n-bar的README 中顯示的語法似乎不正確。
如庫的示例檔案所示，函式 d3nBar 將一個物件作為輸入引數，并帶有一個data屬性。
解決方案
應用 d3n-barchart 示例檔案中的語法可解決錯誤：
const bar = d3nBar({
data: csvData
, selector: selector
, container: container
, style: style
})
您可能想要更正 d3n-barchart 的 README 檔案并提交拉取請求，以幫助未來的用戶正確獲取代碼:)
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/351746.html
標籤：javascript 节点.js d3.js
上一篇：逼近未知函式的逆