如何在 JavaScript 和 D3 中將 D3 數據對象數組從長格式轉換為寬格式？

Question

我得到的數據是這種格式：

let data_sales = [
  { "Suburb": "ardno", "YearQtr": "2001Q2", "Type": "House", "NumSales": 10 },
  { "Suburb": "ardno", "YearQtr": "2001Q2", "Type": "Unit", "NumSales": 20 },
  { "Suburb": "ardno", "YearQtr": "2001Q2", "Type": "Land", "NumSales": 30 },
  { "Suburb": "ardno", "YearQtr": "2002Q1", "Type": "Unit", "NumSales": 40 },
  { "Suburb": "ardno", "YearQtr": "2002Q1", "Type": "House", "NumSales": 50 },
  { "Suburb": "keilor", "YearQtr": "2006Q4", "Type": "House", "NumSales": 48 },
  { "Suburb": "keilor", "YearQtr": "2007Q4", "Type": "House", "NumSales": 61 },
  { "Suburb": "box", "YearQtr": "2011Q2", "Type": "House", "NumSales": 24 },
  { "Suburb": "box", "YearQtr": "2011Q4", "Type": "Unit", "NumSales": 26 },
  { "Suburb": "box", "YearQtr": "2008Q3", "Type": "Land", "NumSales": 5 }
]

我想要這種格式：

data_sales__wide = [
  { "Suburb": "ardno", "YearQtr": "2001Q2", "House": 10, "Unit": 20, "Land": 30 },
  { "Suburb": "ardno", "YearQtr": "2002Q1", "House": 40, "Unit": 50 },
  { "Suburb": "keilor", "YearQtr": "2006Q4", "House": 48 },
  { "Suburb": "keilor", "YearQtr": "2007Q4", "House": 61 },
  { "Suburb": "box", "YearQtr": "2011Q2", "House": 24, "Unit": 26 },
  { "Suburb": "box", "YearQtr": "2008Q3", "Land": 5 }
]

查看如何將多行旋轉為一行，從而將長格式轉換為寬格式。

到目前為止，我已經嘗試了幾種技術，最接近我想要的結果的是下面的代碼（靈感來自@MikeBostock 對此處旋轉的評論： https://github.com/d3/d3-array/issues/142 #issuecomment-761861983 ）。 但是這段代碼並沒有遍歷所有 YearQtr 並且似乎只返回每個郊區的最后一個 YearQtr。

let data_sales__wide = Array.from(
  d3.group(data_sales, d => d.Suburb),
    ([Suburb, group]) => Object.fromEntries(
      [["Suburb", Suburb]]
        .concat(group.map(d => ['YearQtr', d.YearQtr] ))
        .concat(group.map(d => [d.Type, d.NumSales] ))
    )
)

有關其他參考上下文：如果我從數據中刪除Suburb維度，只留下YearQtr, Type, NumSales列，則以下代碼有效（與 Mike Bostock 評論完全相同）：

let sales_wide = Array.from(
    d3.group(sales, d => d.YearQtr),
        ([YearQtr, group]) => Object.fromEntries(
        [["YearQtr", YearQtr]].concat(
            group.map(d => [d.Type, d.NumSales])
        )
    )
)

所以我認為它不起作用，因為我的代碼嵌套在Suburb和YearQtr之間。

有什么想法（我正在尋找更清晰/可讀的代碼）？

Answer 1

您可以將Array#reduce與嵌套的 object 一起使用來存儲兩個鍵的每個值組合的值。

 let arr=[{Suburb:"ardno",YearQtr:"2001Q2",Type:"House",NumSales:10},{Suburb:"ardno",YearQtr:"2001Q2",Type:"Unit",NumSales:20},{Suburb:"ardno",YearQtr:"2001Q2",Type:"Land",NumSales:30},{Suburb:"ardno",YearQtr:"2002Q1",Type:"Unit",NumSales:40},{Suburb:"ardno",YearQtr:"2002Q1",Type:"House",NumSales:50},{Suburb:"keilor",YearQtr:"2006Q4",Type:"House",NumSales:48},{Suburb:"keilor",YearQtr:"2007Q4",Type:"House",NumSales:61},{Suburb:"box",YearQtr:"2011Q2",Type:"House",NumSales:24},{Suburb:"box",YearQtr:"2011Q4",Type:"Unit",NumSales:26},{Suburb:"box",YearQtr:"2008Q3",Type:"Land",NumSales:5}]; let res = Object.values(arr.reduce((acc,{Suburb,YearQtr,Type,NumSales})=>{ Object.assign(((acc[Suburb] = acc[Suburb] || {})[YearQtr] = acc[Suburb][YearQtr] || {Suburb, YearQtr}), {[Type]: NumSales}); return acc; }, {})).flatMap(Object.values); console.log(res);