Javascript 列中有键的堆叠图表

我正在尝试使用世卫组织的一些CSV数据构建一个堆叠面积图，其格式如下：

date,governate,cases,deaths,fatalRate,attackRate,english
05/22/17,Abyan,1068,10,0.9,1.75,Abyan
05/22/17,Aden,489,12,2.5,0.51,Aden
05/22/17,Al Bayda,1498,6,0.4,1.95,Al Bayda
05/22/17,Al Dhale'e,1401,8,0.6,1.86,Al Dhale'e
05/22/17,Al-Hudaydah,1397,32,2.3,0.42,Al Hudaydah
05/22/17,Al_Jawf,189,3,1.6,0.29,Al Jawf
05/22/17,Al Mahwit,2486,34,1.4,3.27,Al Mahwit
05/22/17,Amanat Al Asimah,9216,33,0.4,2.79,Amanat Al Asimah
05/22/17,Amran,3743,45,1.2,2.45,Amran
05/22/17,Dhamar,1617,33,2,0.76,Dhamar
05/22/17,Hajjah,4664,42,0.9,2.1,Hajjah
05/22/17,Ibb,1378,37,2.7,0.45,Ibb
...

我已经成功地嵌套了数据，并构建了一个折线图，显示了一段时间内每个省的死亡人数。但是，我想显示一段时间内的累计死亡人数，这需要一个堆积面积图，如下例所示：

我以前创建过堆叠面积图，但通常数据的顶部都有相关的键，如我发布链接的示例中所示，或如以下数据：

day,titanic,avatar,akira,frozen,deliverance,avengers
1,20,8,3,0,0,0
2,18,5,1,13,0,0
3,14,3,1,10,0,0
4,7,3,0,5,27,15
5,4,3,0,2,20,14
6,3,1,0,0,10,13
7,2,0,0,0,8,12

格式化区域堆栈图的数据只需要运行

d3.stack（）.keys（[“泰坦尼克号”、“阿凡达”、“阿基拉”、“冻结”、“释放”、“复仇者”）

然而，对于世卫组织提供的这种特殊数据格式，我希望对数据进行排序的相关“键”实际上都在“governate”列中。就好像上述数据的格式如下所示：

day,movie,value
1,titanic,20
1,avatar,8
1,akira,3
1,frozen,0
1,deliverance,0
1,avengers,0
2,titanic,18
2,avatar,5
2,akira,1
2,frozen,13
...etc

如何格式化数据，以便governate可以跨时间的x轴对其进行堆叠？

---

谢谢你的帮助

最简单、最懒惰的解决方案是将加载和解析该csv后的数据结构转换为适合传递给堆栈生成器的数据结构

在这个解决方案中，我首先用一个行函数除去不必要的列

function(d) {
    return {
        date: d.date,
        governate: d.governate,
        deaths: +d.deaths
    }
}

然后我使用这个片段（其中

rawData

是由

d3.csv

解析的数据）来获取唯一的日期和这些日期的所有值：

var data = [...new Set(rawData.map(function(d) {
    return d.date
}))].map(function(d) {
    var obj = {};
    rawData.forEach(function(e) {
        if (e.date === d) {
            obj[e.governate] = e.deaths
        }
        obj.date = d;
    })
    return obj;
})

以下是演示：

var csv=`date，governate，cases，death，fatalRate，attackRate，english
2017年5月22日，阿比扬，1068,10,0.9,1.75，阿比扬
2017年5月22日，亚丁，489,12,2.5,0.51，亚丁
17年5月22日，巴伊达，1498,6,0.4,1.95，巴伊达
17年5月22日，阿尔达勒，1401,8,0.6,1.86，阿尔达勒
17年5月22日，胡代达，1397,32,2.3,0.42，胡代达
17年5月22日，Al_Jawf，189,3,1.6,0.29，Al Jawf
17年5月22日，艾尔·马维特，2486,34,1.4,3.27，艾尔·马维特
2017年5月22日，Amanat Al-Asimah，9216,33,0.4,2.79，Amanat Al-Asimah
2017年5月22日，阿姆兰，3743,45,1.2,2.45，阿姆兰
2017年5月22日，达马尔，1617,33,2,0.76，达马尔
2017年5月22日，哈杰，4664,42,0.9,2.1，哈杰
2017年5月22日，Ibb，1378,37,2.7,0.45，Ibb
2017年5月23日，阿比扬，1068,9,9.9,1.75，阿比扬
2017年5月23日，亚丁，489,92,9.5,0.51，亚丁
17年5月23日，巴伊达，1498,9,0.4,1.95，巴伊达
17年5月23日，阿尔达勒，1401,9,0.6,1.86，阿尔达勒
17年5月23日，Al Hudaydah，1397,92,2.3,0.42，Al Hudaydah
17年5月23日，阿尔贾夫，189,9,1.6,0.29，阿尔贾夫
17年5月23日，艾尔·马维特，2486,94,1.4,3.27，艾尔·马维特
2017年5月23日，Amanat Al-Asimah，9216,93,0.4,2.79，Amanat Al-Asimah
2017年5月23日，阿姆兰，3743,95,1.2,2.45，阿姆兰
2017年5月23日，达马尔，1617,93,2,0.76，达马尔
2017年5月23日，哈杰，4664,92,0.9,2.1，哈杰
17年5月23日，Ibb，1378,97,2.7,0.45，Ibb`；
var rawData=d3.csvParse（csv，函数（d）{
返回{
日期：d.date，
治理，治理，
死亡：+d.死亡
}
});
var data=[…新集合（rawData.map）（函数（d）{
返回日期
}))].地图（功能（d）{
var obj={}；
rawData.forEach（函数（e）{
如果（如日期===d）{
obj[e.治理]=e.死亡
}
obj.date=d；
})
返回obj；
})
console.log（数据）

---

PS：我的解决方案是嵌套循环，我承认这不是最快的代码。如果你把这变成一个纯粹的JS问题，去掉其他标签，只问如何操作数组以达到预期的结果，你会从JS专家那里得到更多的答案。谢谢Gerardo。这是可行的，但实际上我的csv是一个很大的外部文件，我不想在HTML中发布它。你知道我怎么能把它单独拉进去，但还是坚持这个方法吗？你说的“我不想在HTML中发布”是什么意思？