React中通过useEffect从本地CSV加载数据到useState失败求助

错误本质 #

<path> attribute d: Expected number, "MNaN,NaNLNaN,NaNL…" 错误说明D3生成折线路径时使用了非数值坐标，核心原因是数据未正确解析为数字类型，或者数据未加载完成就执行了绘图逻辑。

逐一排查步骤 #

1. 校验CSV数据格式 #

确保CSV中的数值字段无非法字符、空格或格式错误，示例正确格式：

date,value
2023-01-01,120
2023-01-02,180
2023-01-03,90

• 避免出现value字段为中文数字、带无关符号的字符串或缺失值等情况。

2. 强制指定数据解析规则 #

D3.csv默认会尝试转换数字，但字段名不匹配或格式特殊时会失效，手动指定解析器确保类型正确：

useEffect(() => {
  d3.csv('/data.csv', (d) => ({
    date: new Date(d.date), // 转换为标准Date类型
    value: +d.value // 强制转为数字，避免字符串导致NaN
  }))
  .then(parsedData => {
    console.log(parsedData); // 打印验证每个字段的类型和值
    setChartData(parsedData);
  })
  .catch(err => console.error('CSV加载失败:', err));
}, []);

3. 确保数据加载完成后再绘图 #

React的useState更新是异步的，需将chartData作为依赖项，仅当数据存在时执行绘图：

// 单独处理绘图逻辑的useEffect
useEffect(() => {
  if (!chartData || chartData.length === 0) return; // 数据为空时跳过执行
  drawChart(chartData);
}, [chartData]); // 依赖chartData，数据更新时自动触发绘图

4. 检查绘图函数中的比例尺配置 #

确认比例尺使用的字段与解析后的数据字段完全匹配，避免字段名拼写错误：

function drawChart(data) {
  const width = 600;
  const height = 400;

  const xScale = d3.scaleTime()
    .domain(d3.extent(data, d => d.date)) // 确保d.date是有效Date类型
    .range([0, width]);

  const yScale = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)]) // 确保d.value是数字类型
    .range([height, 0]);

  // 生成折线路径
  const line = d3.line()
    .x(d => xScale(d.date))
    .y(d => yScale(d.value));

  // 后续DOM操作...
}

5. 验证本地CSV文件路径 #

React项目中，静态资源需放在public目录下，路径使用根路径（如/data.csv）而非相对路径（./data.csv），否则D3无法读取文件，导致数据为空。

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