d3.js - d3 堆栈的数据转换
问题描述
我正在尝试重新组织我的数据以使用 d3 堆栈生成器运行。下面的代码可以工作,但会产生重复,看起来很啰嗦。有没有更好的方法来实现这种转变?
From: data = {code: "sjp", year: 2020, credit: 12},
{code: "sjp", year: 2019, credit: 18},
{code: "sjp", year: 2018, credit: 10},
{code: "anp", year: 2020, credit: 16},
{code: "anp", year: 2019, credit: 14},
{code: "anp", year: 2018, credit: 12}
To: data = {code: "sjp" , y2020: 12, y2019: 18, y2018: 10},
{code: "anp" , y2020: 16, y2019: 14, y2018: 12}
keyz = d3.map(d, function(s){return(s.code)})
keyz.forEach(function (d) {
var item = d.filter(function (e) { return e.code === d})
for (var i = 0; i < item.length; i++) {
switch(d[i].year) {
case "2020":
y2020 = item[i].credit
break;
case "2019":
y2019 = item[i].credit
break;
case "2018":
y2018 = item[i].credit
}
}
Newarray.push({"code": d, "y2020": y2020,"y2019":y2019, "y2018": y2018, "y2017":y2017, "y2016": y2016, "y2015":y2015})
解决方案
怎么样:
<!DOCTYPE html>
<html>
<script>
let data = [{code: "sjp", year: 2020, credit: 12},
{code: "sjp", year: 2020, credit: 12},
{code: "sjp", year: 2019, credit: 18},
{code: "sjp", year: 2019, credit: 18},
{code: "sjp", year: 2018, credit: 10},
{code: "sjp", year: 2018, credit: 10},
{code: "anp", year: 2020, credit: 16},
{code: "anp", year: 2020, credit: 16},
{code: "anp", year: 2019, credit: 14},
{code: "anp", year: 2019, credit: 14},
{code: "anp", year: 2018, credit: 12}];
let obj = {}; // create a "dictionary" object
data.forEach(function(d){ // loop the data
if (!obj[d.code]) obj[d.code] = {code: d.code}; // see if the "code" key exists in the dictionary yet, if not add it
if (!obj[d.code]['y' + d.year]) obj[d.code]['y' + d.year] = 0; // first time we see year initialize to 0;
obj[d.code]['y' + d.year] += d.credit; // retrieve the dictionary value for this code and year and add value
})
console.log(Object.values(obj)); // get just the values of our dictionary as an array
</script>
</body>
</html>
推荐阅读
- asp.net-core - 如何在 .net Core 2.1 RazorPages 中创建确认消息?
- css - Bootstrap 4 图像叠加问题
- google-apps-script - 在 Google 表格中为具有仅查看权限的用户创建弹出消息
- python - Python连接两列但保持固定长度
- python - Python - 插入 ms 访问表
- jquery - Boostrap Datepicker 不显示/
- django - Django模板引擎的静态模板标签
- python - 在 YAML 中使用 Python 混合块和流格式
- html - 拒绝在框架中显示“https://www.youtube.com/watch?v=oKZRsBjQJOs”,因为它将“X-Frame-Options”设置为“sameorigin”
- c - 我怎样才能在我的代码中加入#define 语句?