如何使用D3.js将长格式CSV数据转换为按大洲分组的宽格式？

我来帮你搞定这个数据转换的需求！你已经完成了CSV数据的解析工作，接下来只需要按大洲分组，把每个国家和对应数值整理成键值对归属到对应大洲下就行。这里提供两种实用的实现方式：

方法一：使用D3.js内置的分组工具（简洁高效） #

D3有专门的d3.group方法可以快速完成分组，再结合Object.fromEntries就能轻松转换成你想要的结构：

d3.csv("/data/data.csv").then(function(csv) {
  // 解析CSV，将values转为数字类型
  const parsedData = csv.map(function(d) {
    return {
      continents: d.continents,
      countries: d.countries,
      values: +d.values
    };
  });

  // 按大洲分组并转换为目标格式
  const groupedData = Array.from(
    d3.group(parsedData, d => d.continents),
    ([continents, group]) => ({
      continents,
      values: Object.fromEntries(group.map(item => [item.countries, item.values]))
    })
  );

  // 输出结果查看
  console.log(groupedData);
});

步骤解释： #

• 数据解析：和你原来的代码一致，把CSV里的values字段从字符串转为数字，确保数值操作的正确性。
• 分组处理：d3.group会返回一个Map，键是大洲名称，值是对应大洲的所有数据对象数组。
• 格式转换：
  • 用Array.from把Map转换成数组（因为Map的每一项是[大洲名, 对应数据组]的结构）。
  • 对每个分组，用Object.fromEntries把组内的每个数据项转换成[国家名, 数值]的条目，再组装成键值对对象，作为values字段的值。

方法二：原生JavaScript实现（直观易理解） #

如果你不想依赖D3的分组方法，用原生JS也能轻松实现：

d3.csv("/data/data.csv").then(function(csv) {
  const parsedData = csv.map(function(d) {
    return {
      continents: d.continents,
      countries: d.countries,
      values: +d.values
    };
  });

  const groupedData = [];
  const continentTracker = {}; // 用来跟踪已创建的大洲条目

  parsedData.forEach(item => {
    // 如果当前大洲还没有创建条目，就新建一个
    if (!continentTracker[item.continents]) {
      continentTracker[item.continents] = {
        continents: item.continents,
        values: {}
      };
      groupedData.push(continentTracker[item.continents]);
    }
    // 将当前国家和数值添加到对应大洲的values对象中
    continentTracker[item.continents].values[item.countries] = item.values;
  });

  console.log(groupedData);
});

步骤解释： #

• 数据解析：同样先完成CSV数据的类型转换。
• 遍历构建分组：
  • 用continentTracker对象记录已经处理过的大洲，避免重复创建条目。
  • 遍历每个数据项，若当前大洲不存在则新建条目并加入结果数组，然后把国家和数值添加到对应大洲的values对象里。

两种方法最终都会得到符合你需求的结构：每个大洲作为一个对象，包含大洲名称和一个以国家为键、数值为值的values对象。

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