如何使用反向將 d3.nest 更改為分組

Question

我正在嘗試更新 D3 v5 的一些舊代碼以使用較新的 group 命令。 我不熟悉排序、映射方法，但我已經部分重寫了它，但我不知道如何復制反向 function。

這是原文：

const years = d3.nest().key(d => d.date.getUTCFullYear()).entries(dateValues).reverse();

對於 D3 v7，我已經做到了這一點：

const years = d3.group(dateValues, d => d.date.getUTCFullYear());

但是我仍然需要修改數組結構以復制使用.reverse() 發生的情況。

function 組將其保留為：

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) […] ]

其中 object 是一個結構如下的對象數組：

如何在 JS 中將其設為具有鍵和值的對象數組？

Answer 1

將 Map object 轉換為數組后（例如使用Array.from ），您只需將 map 反轉為所需的 ZA8CFDE69AC96F4B6696 結構：

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>