如何使用 javascript map() 方法展平 d3.nest？

Question

我有一些數據嵌套在 d3 中。 我現在想把它弄平。 我正在嘗試使用map()方法來執行此操作，但我遇到了錯誤。

這是我在控制台日志中看到的錯誤——與第 24 行相關（我嘗試在其中獲取item.values[i].key ）：

未捕獲（承諾）類型錯誤：無法讀取未定義的屬性“鍵”

我看不出哪里出錯了，我花了幾個小時在谷歌上搜索。 這個問題類似，但沒有回答。 看起來這應該是直截了當的。

我錯過了什么？ 謝謝！

這是我的代碼：

<!DOCTYPE html>
<meta charset="utf-8">

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

const mhData = axios.get("https://docs.google.com/spreadsheets/d/e/2PACX-1vR-MzpkhMmVMkwmhKFvjPyru5LlYPvWo7_xU8ZARbQmdWP9AIh1VXhZ1aWLWR_PgAySq4gobndfpWP0/pub?gid=0&single=true&output=csv")
    .then(content => {

        const justData = content.data
        const csv = d3.csvParse(justData)

        const nestedData = d3.nest()
            .key(d => d.date)
            .key(d => d.industry)
            .rollup(v => d3.sum(v, d => d.value))
            .entries(csv)
            console.log('nestedData',nestedData)


        const flattenData = nestedData.map((item,i) => ({
            date: item.key,
            industry: item.values[i].key,
            value: item.values[i].value
        }));
        console.log('flattenData',flattenData)
})
</script>
</body>
</html>

Answer 1

在您的代碼中： nestedData.map((item,i) => ({... , i是nestedData的索引而不是values - 這就是您遇到錯誤的原因。

您的nest返回單層嵌套，例如

nestedData [
  {
    "key": "2020-01-07",
    "values": [
      {
        "key": "Tech",
        "value": 1352
      },
      {
        "key": "Media",
        "value": 2848
      },
      ...

因此，在您的map ，您需要一個嵌套的map 。 您還可以將“外部” map為flatMap ，然后它將返回一個對象數組。

我從您的數據中抽取了一小部分樣本來配合下面的工作示例：

 const csv = mockData(); //console.log(csv); const nestedData = d3.nest().key(d => d.date).key(d => d.industry).rollup(v => d3.sum(v, d => d.value)).entries(csv) //console.log('nestedData',nestedData); const flattenData = nestedData.flatMap((item, i) => { const date = item.key; return item.values.map(industry => ({ date: date, industry: industry.key, value: industry.value })); }); console.log('flattenData', flattenData); function mockData() { const str = `date,industry,gender,value 2020-01-07,Tech,Men,1004 2020-01-07,Tech,Women,348 2020-01-07,Media,Men,2468 2020-01-07,Media,Women,380 2020-01-07,Real Estate,Men,1214 2020-01-07,Real Estate,Women,391 2020-01-14,Tech,Men,989 2020-01-14,Tech,Women,357 2020-01-14,Media,Men,2430 2020-01-14,Media,Women,393 2020-01-14,Real Estate,Men,1322 2020-01-14,Real Estate,Women,366 2020-01-21,Tech,Men,975 2020-01-21,Tech,Women,339 2020-01-21,Media,Men,2416 2020-01-21,Media,Women,388 2020-01-21,Real Estate,Men,1336 2020-01-21,Real Estate,Women,3581`; return d3.csvParse(str); }

 .as-console-wrapper { max-height: 100%;important: top; 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>

這不是扁平化 d3.nest 的d3.nest的通用方法 - 您需要考慮n級嵌套，並且可能需要遞歸方法。 但這應該適用於您的示例。

這里和這里有一些相關的帖子。

如何使用 javascript map() 方法展平 d3.nest？

問題描述

1 個解決方案

解決方案1
1 已采納 2021-04-29 11:08:36

如何使用 javascript map() 方法展平 d3.nest？

問題描述

1 個解決方案

解決方案1 1 已采納 2021-04-29 11:08:36

解決方案1
1 已采納 2021-04-29 11:08:36