我正在嘗試更新 D3 v5 的一些舊代碼以使用較新的 group 命令。我不熟悉排序、映射方法,但我已經部分重寫了它,但我不知道如何復制反向函式。
這是原文:
const years = d3.nest().key(d => d.date.getUTCFullYear()).entries(dateValues).reverse();
對于 D3 v7,我已經做到了這一點:
const years = d3.group(dateValues, d => d.date.getUTCFullYear());
但是我仍然需要修改陣列結構以復制 .reverse() 發生的情況。
group 函式將其保留為:
Map(10) { 2010 → (276) […], 2011 → (365) […], 2012 → (366) […], 2013 →
(365) […], 2014 → (365) […], 2015 → (365) […], 2016 → (366) […], 2017 → (365) […], 2018 → (365) […], 2019 → (103) […] }
而原始的 next 和 reverse 將其保留為鍵和值的陣列
Array(10) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…} ]
0: Object { key: "2019", values: (103) […] } ?
1: Object { key: "2018",values: (365) […] } ?
2: Object { key: "2017", values: (365) […] } ?
3: Object { key: "2016", values: (366) […] } ?
4: Object { key: "2015", values: (365) […] }
5: Object { key: "2014", values: (365)[…] } ?
6: Object { key: "2013", values: (365) […] } ?
7: Object { key: "2012", values: (366) […] }
8: Object { key: "2011", values:(365) […] }
9: Object { key: "2010", values: (276) […] }
如果我沒有使用正確的術語,但我不經常使用 JS 或 D3,請提前抱歉。謝謝。
編輯:資料為 json 格式。例子:
[{
"Date": "2017-08-30",
"AnswerCount": "9510"
},
{
"Date": "2010-05-23",
"AnswerCount": "2096"
},
{
"Date": "2014-01-10",
"AnswerCount": "11451"
},
{
"Date": "2019-03-23",
"AnswerCount": "4393"
},
{
"Date": "2013-03-07",
"AnswerCount": "11811"
}
]
編輯:這樣做使它更接近原始結構:
var year_map = d3.group(dateValues, d => d.date.getUTCFullYear());
var years=Array.from(year_map);
years.reverse();
但是它不在 Key: Values 結構中,而是
Array(10) [ (2) […], (2) […], (2) […], (2) […], (2) […], (2) […], (2) […], (2) […], (2) […], (2) […] ]
?
0: Array [ 2019, (103) […] ]
?
1: Array [ 2018, (365) […] ]
?
2: Array [ 2017, (365) […] ]
?
3: Array [ 2016, (366) […] ]
?
4: Array [ 2015, (365) […] ]
?
5: Array [ 2014, (365) […] ]
?
6: Array [ 2013, (365) […] ]
?
7: Array [ 2012, (366) […] ]
?
8: Array [ 2011, (365) […] ]
?
9: Array [ 2010, (276) […] ]
其中物件是一個結構如下的物件陣列:

如何在 JS 中將其設為具有鍵和值的物件陣列?
uj5u.com熱心網友回復:
將 Map 物件轉換為陣列后(例如使用Array.from),您只需將其反轉并將其映射到所需的物件結構:
const years = Array.from(year_map).reverse().map(d => ({key: d[0], values: d[1]}));
您也可以使用 只回圈一次陣列reduce,但這可能不是必需的。
這是演示:
顯示代碼片段
const csv = `year,value
2010,1
2010,2
2010,3
2011,1
2011,2
2011,3
2012,1
2012,2
2012,3`;
const data = d3.csvParse(csv, d3.autoType);
const year_map = d3.group(data, d => d.year);
const years = Array.from(year_map).reverse().map(d => ({key: d[0], values: d[1]}));
console.log(years)
<script src="https://d3js.org/d3.v7.min.js"></script>
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/516097.html
