D3.js v4升级至v7：CSV数据处理函数的作用解析及v7适配实现咨询

Hi Jean-michel, 很高兴帮你梳理这个问题——从D3 v4升级到v7时，CSV数据处理的写法变化确实容易让人困惑，我先帮你拆解原函数的作用，再给出v7的适配方案：

一、原v4中CSV处理函数的具体作用 #

你贴的这个函数是D3的行转换函数（row conversion function），它会在CSV文件的每一行被解析后自动执行，用来清洗、转换数据。我们逐行拆解它的逻辑：

function(d, i, columns) {
  // 循环从第2列（索引1）开始，遍历所有数据列
  for (i = 1, t = 0; i < columns.length; ++i) {
    // 把当前列的字符串值转为数字类型，同时累加到总和t
    t += d[columns[i]] = +d[columns[i]];
  }
  // 给当前行对象添加total属性，存储所有数据列的总和
  d.total = t;
  // 返回处理后的行对象，D3会把所有行收集成最终的data数组
  return d;
}

更直白地说，它做了三件事：

• 把CSV中除第一列外的所有列的字符串值转为数字（因为D3默认解析CSV时所有值都是字符串）；
• 计算这些数字列的总和，存在当前行的total属性里；
• 返回处理后的行数据，供后续绘图逻辑使用。

参数含义补充：

• d：当前正在处理的CSV行的原始数据对象（比如{ "category": "A", "value1": "10", "value2": "20" }）；
• i：当前行的索引（从0开始）；
• columns：CSV文件所有列名组成的数组（比如["category", "value1", "value2"]）。

二、适配D3 v7的实现方案 #

D3 v7开始，d3.csv()不再支持回调函数，而是返回一个Promise对象，需要用.then()来接收处理后的数据，用.catch()处理错误。你只需要把原有的行转换函数保留，调整调用方式即可：

完整适配代码 #

// 先定义行转换函数（和原v4的逻辑完全一样）
const rowConverter = function(d, i, columns) {
  for (i = 1, t = 0; i < columns.length; ++i) {
    t += d[columns[i]] = +d[columns[i]];
  }
  d.total = t;
  return d;
};

// 用Promise方式调用d3.csv
d3.csv("20230316_data.csv", rowConverter)
  .then(function(data) {
    // 这里写你原有的绘图逻辑，data就是处理好的数组
    console.log("处理后的数据：", data);
    // 比如：绘制图表的代码
    // ...
  })
  .catch(function(error) {
    // 处理加载或解析错误
    console.error("CSV加载失败：", error);
  });

关键变化说明 #

1. 去掉了原v4中第二个回调参数（function(error, data)），改用.then()接收成功的数据；
2. 新增.catch()捕获加载失败或数据解析错误的情况；
3. 行转换函数的逻辑完全不需要修改，直接复用即可——它的作用和在v4里完全一致。

这样调整后，你的代码就能在D3 v7中正常运行，同时保留原有的数据处理逻辑啦。

备注：内容来源于stack exchange，提问作者JMA