如何使用 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