使用D3加载CSV数据时如何将列从字符串类型转为浮点/整型？

问题原因 #

D3 从 v6.0 版本开始重构了数据加载相关的API，废弃了原有 d3.csv() 第三个参数传入回调函数的用法，改为返回Promise对象处理异步结果。你使用的v7.0.0属于更新版本，原有写法里的rowConverter转换函数根本没有被执行，因此数值转换逻辑不生效，拿到的还是原始的字符串类型数据。

解决方法 #

调整d3.csv的调用方式，用Promise链式调用或者async/await写法调用，把rowConverter作为第二个参数传入即可。

写法1：Promise .then() 写法 #

var rowConverter = function(d) {
  return {
    Food: d.Food,
    Yummy: parseFloat(d.Yummy)
  };
}

// 第二个参数传转换函数，用.then接收处理后的数据
d3.csv("food.csv", rowConverter)
  .then(function(data) {
    console.log(data);
    // 后续数据处理逻辑都写在这里
  })
  .catch(function(error) {
    // 可选：捕获加载报错
    console.error("CSV加载失败：", error);
  });

写法2：async/await 写法（更易读） #

var rowConverter = function(d) {
  return {
    Food: d.Food,
    Yummy: parseFloat(d.Yummy)
  };
}

async function loadData() {
  try {
    const data = await d3.csv("food.csv", rowConverter);
    console.log(data);
    // 后续数据处理逻辑
  } catch (error) {
    console.error("CSV加载失败：", error);
  }
}

loadData();

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