与钥匙的被堆积的图在专栏

Question

我正在尝试使用来自世界卫生组织的一些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
...

我设法嵌套数据，并建立一个线图，显示每个省的死亡人数。但是，我想显示随着时间的推移累积死亡，这需要一个堆积区域图表，如下例所示：https://bl.ocks.org/greencracker/e08d5e789737e91d6e73d7dcc34969bf

我之前创建了堆积区域图表，但通常数据在顶部有相关的键，就像我发布链接的示例，或者像这样的数据：

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(["titanic","avatar","akira","frozen","deliverance","avengers"])

但是，根据世界卫生组织的这种特殊数据格式，我希望对数据进行排序的相关“密钥”实际上都在“政府”栏目中。就好像上面的数据格式是这样的：

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

如何格式化数据，以便在x轴时间内通过管理进行堆叠？

谢谢你的帮助！

Answer 1

最简单和最懒惰的解决方案是简单地将d3.csv加载和解析该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,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
05/23/17,Abyan,1068,9,9.9,1.75,Abyan
05/23/17,Aden,489,92,9.5,0.51,Aden
05/23/17,Al Bayda,1498,9,0.4,1.95,Al Bayda
05/23/17,Al Dhale'e,1401,9,0.6,1.86,Al Dhale'e
05/23/17,Al-Hudaydah,1397,92,2.3,0.42,Al Hudaydah
05/23/17,Al_Jawf,189,9,1.6,0.29,Al Jawf
05/23/17,Al Mahwit,2486,94,1.4,3.27,Al Mahwit
05/23/17,Amanat Al Asimah,9216,93,0.4,2.79,Amanat Al Asimah
05/23/17,Amran,3743,95,1.2,2.45,Amran
05/23/17,Dhamar,1617,93,2,0.76,Dhamar
05/23/17,Hajjah,4664,92,0.9,2.1,Hajjah
05/23/17,Ibb,1378,97,2.7,0.45,Ibb`;

var rawData = d3.csvParse(csv, function(d) {
  return {
    date: d.date,
    governate: d.governate,
    deaths: +d.deaths
  }
});

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;
})

console.log(data)

<script src="https://d3js.org/d3.v4.min.js"></script>

现在，使用这个data数组结构，您可以使用堆栈生成器（d3.stack()）。