如何使用新版D3在Node.js环境下生成PNG图片？

一、核心问题解答 #

1. 现在还需要用jsdom这类工具模拟DOM吗？

没错，仍然需要。D3的核心功能（比如创建SVG元素、计算布局、绑定数据）严重依赖浏览器的DOM API，而Node.js本身并没有内置这些环境。不过现在有更现代的选择：

• 继续使用维护中的jsdom（它是d3-node默认依赖的库，目前仍在更新）；
• 也可以尝试更轻量的happy-dom，它的DOM模拟性能更好，适合生成图表这类场景。

2. d3-node系列包还能用吗？

• d3-node核心包：虽然多年未更新，但在D3 v7环境下基本能正常工作，它本质是封装了jsdom和D3的集成逻辑，只要你不依赖它的旧版本jsdom特性，问题不大。
• 像d3node-barchart、d3node-piechart这类封装好的图表库：不推荐继续使用。这些库大多停留在D3 v3/v4时代，内部的API调用（比如数据处理、布局方法）和D3 v7已经不兼容，而且长期无人维护，很容易出现你遇到的这类错误。

二、解决你当前的代码错误 #

你遇到的TypeError: Cannot read properties of undefined (reading 'map')，本质是两个问题叠加：

1. 数据类型不匹配：d3.csvParse默认会把所有字段解析为字符串，但d3node-barchart期望value是数字类型，导致内部数据处理逻辑异常；
2. 封装库API过时：d3node-barchart的参数格式或内部逻辑和D3 v7不兼容，无法正确接收你传入的csvData。

快速修复方案（针对现有代码）

先把CSV数据的value字段转为数字，再传入图表库：

const csvData = d3.csvParse(csvString, d => ({
  key: d.key,
  value: +d.value // 把字符串转为数字
}));

不过即使修复了数据类型，你可能还是会遇到其他API兼容问题，所以更推荐下面的替代方案。

三、推荐替代方案：手动实现D3图表 + 转PNG #

既然封装库不靠谱，不如直接用D3 v7手动构建图表，再把SVG转成PNG。这种方式更灵活，完全适配最新版本的D3，步骤如下：

示例代码

const fs = require('fs');
const D3Node = require('d3-node');
const sharp = require('sharp');

// 1. 解析并处理数据（确保数值类型正确）
const csvString=`key,value
Bob,33
Robin,12
Stacy,20
Charles,13
Mary,29`;
const csvData = d3.csvParse(csvString, d => ({
  key: d.key,
  value: +d.value
}));

// 2. 创建D3Node实例，初始化SVG环境
const d3n = new D3Node({
  svg: true,
  styles: `.bar { fill: steelblue; } .axis { font: 10px sans-serif; }`
});
const d3 = d3n.d3;
const svg = d3n.createSVG(400, 300); // 设置SVG画布宽高

// 3. 手动构建条形图逻辑（完全遵循D3 v7 API）
const margin = { top: 20, right: 20, bottom: 30, left: 40 };
const width = 400 - margin.left - margin.right;
const height = 300 - margin.top - margin.bottom;

// 创建绘图容器
const g = svg.append('g')
  .attr('transform', `translate(${margin.left}, ${margin.top})`);

// 设置比例尺
const xScale = d3.scaleBand()
  .domain(csvData.map(d => d.key))
  .range([0, width])
  .padding(0.1);

const yScale = d3.scaleLinear()
  .domain([0, d3.max(csvData, d => d.value)])
  .range([height, 0]);

// 绘制条形
g.selectAll('.bar')
  .data(csvData)
  .enter().append('rect')
  .attr('class', 'bar')
  .attr('x', d => xScale(d.key))
  .attr('width', xScale.bandwidth())
  .attr('y', d => yScale(d.value))
  .attr('height', d => height - yScale(d.value));

// 添加坐标轴
g.append('g')
  .attr('class', 'x axis')
  .attr('transform', `translate(0, ${height})`)
  .call(d3.axisBottom(xScale));

g.append('g')
  .attr('class', 'y axis')
  .call(d3.axisLeft(yScale));

// 4. 将SVG转换为PNG并保存
const svgString = d3n.svgString();
sharp(Buffer.from(svgString))
  .png()
  .toFile('bar-chart.png')
  .then(() => console.log('PNG图表生成成功！'))
  .catch(err => console.error('生成失败：', err));

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