如何在d3.js v6中用d3.rollups正确计算每日cases总和？

问题根源 #

你的代码里d3.rollups的聚合函数写法错误：g => g.sum 是无效代码——分组得到的数组g并没有内置的sum方法，必须明确指定对数组内的cases字段做求和计算。

修正后的完整代码 #

const parseDate= d3.timeParse("%Y-%m-%d");

d3.csv("./multilinedata.csv").then(function(dataline) {
    dataline.forEach(function(d) {
        d.date = parseDate(d.date);
        d.cases= +d.cases;
    });
    // 修正聚合逻辑：用d3.sum计算分组内的cases总和
    const totalCase = d3.rollups(dataline, g => d3.sum(g, d => d.cases), d => d.date);
    console.log(totalCase);
});

额外说明 #

1. 聚合函数的作用是处理分组后的数组，这里d3.sum(g, d => d.cases)会遍历分组里的每一条数据，把cases字段累加起来，得到当日的总cases值。
2. 你也可以用原生JS的reduce实现相同效果，替换成下面的写法即可：

   const totalCase = d3.rollups(dataline, g => g.reduce((total, item) => total + item.cases, 0), d => d.date);
   

3. 你的CSV每行末尾有多余的逗号，虽然D3的CSV解析器通常能兼容，但建议清理掉避免潜在的解析异常。

内容的提问来源于stack exchange，提问作者Mr.Muu