时间戳

首页 > 解决方案 > 对整个 csv 列求和以使用 d3 javascript 显示总数

javascript - 对整个 csv 列求和以使用 d3 javascript 显示总数

问题描述

我有以下本地 csv 文件：

country,population,porcentage
China,15,1.1
India,86,4.1
United States,357,15.2
Indonesia,1207,51.2
Brazil,717,29.12

我要做的是获取人口列的总值，以便将其显示在我的条形图下方。我正在使用 d3 csv 函数来处理数据，但问题是当我获取数据时，该函数将其放在单独的对象中，这不允许我将它们相加。这就是他们的样子。

关联

我首先尝试使用reduce，但它不起作用。

import { csv, sum } from 'd3';

csv("./src/bardata.csv", (() => {
    var sum;
    return sum = (...args) => {
        return args.reduce((a, b) => a + b, 0);
    };
}))();

我也尝试过使用 map 函数，但我的理解是这只适用于数组，我的数据位于单独的对象中。无论如何，我不断收到“data.map 不是函数”错误。有什么建议么？

标签： javascriptd3.js

解决方案

您已经导入d3.sum()了它，可以通过提供访问器函数作为第二个参数来对对象数组求和：

d3。总和（可迭代[，访问器]）

返回给定可迭代数字的总和。如果iterable不包含数字，则返回0。可以指定一个可选的访问器函数，相当于在计算总和之前调用Array.from。

对于您的代码，这可能是以下几行

import { csv, sum } from 'd3';

csv("./src/bardata.csv")
  .then(data => {
    const total = sum(data, d => d.population);
  });

推荐阅读