时间戳

首页 > 解决方案 > 在 d3v4 中将长数据转换为宽数据的更新函数

javascript - 在 d3v4 中将长数据转换为宽数据的更新函数

问题描述

我正在尝试将一些长数据格式的数据转换为 d3 中的宽数据格式。

我在这里找到了一个包含该信息的帖子：http: //jonathansoma.com/tutorials/d3/wide-vs-long-data/ 但是，此功能仅适用于 d3v3，我需要能够在 d3v4 中使用它.

下面是我的 d3v3 代码。

如果我使用 d3v4 运行它，我不会在控制台中收到任何错误，但是在我记录宽数据的地方，它会显示如下：

wide data (7) [undefined, undefined, undefined, undefined, undefined, undefined, undefined]

我不认为 d3.nest 在 v4 中发生了变化。

谁能告诉我我需要改变什么才能在第 4 版中进行这项工作？非常感谢任何见解！

如果有帮助，这是一个小提琴：https ://jsfiddle.net/ksc4b6wL/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://d3js.org/d3.v3.min.js"></script>   
</head>
<body>
    <script>
        var long_data = [
        {date: "01/02/20", value: "3628", age_group: "1 to 18"},
        {date: "01/15/20", value: "3634", age_group: "1 to 18"},
        {date: "02/03/20", value: "3619", age_group: "1 to 18"},
        {date: "02/18/20", value: "3593", age_group: "1 to 18"},
        {date: "03/02/20", value: "3605", age_group: "1 to 18"},
        {date: "03/16/20", value: "3444", age_group: "1 to 18"},
        {date: "04/01/20", value: "3007", age_group: "1 to 18"},
        {date: "01/02/20", value: "5753", age_group: "19 to 30"},
        {date: "01/15/20", value: "5817", age_group: "19 to 30"},
        {date: "02/03/20", value: "5850", age_group: "19 to 30"},
        {date: "02/18/20", value: "5826", age_group: "19 to 30"},
        {date: "03/02/20", value: "5881", age_group: "19 to 30"},
        {date: "03/16/20", value: "5685", age_group: "19 to 30"},
        {date: "04/01/20", value: "4876", age_group: "19 to 30"},
        {date: "01/02/20", value: "2347", age_group: "31 to 45"},
        {date: "01/15/20", value: "2356", age_group: "31 to 45"},
        {date: "02/03/20", value: "2394", age_group: "31 to 45"},
        {date: "02/18/20", value: "2427", age_group: "31 to 45"},
        {date: "03/02/20", value: "2418", age_group: "31 to 45"},
        {date: "03/16/20", value: "2371", age_group: "31 to 45"},
        {date: "04/01/20", value: "1993", age_group: "31 to 45"},
        {date: "01/02/20", value: "1691", age_group: "46 to 70"},
        {date: "01/15/20", value: "1727", age_group: "46 to 70"},
        {date: "02/03/20", value: "1721", age_group: "46 to 70"},
        {date: "02/18/20", value: "1736", age_group: "46 to 70"},
        {date: "03/02/20", value: "1726", age_group: "46 to 70"},
        {date: "03/16/20", value: "1707", age_group: "46 to 70"},
        {date: "04/01/20", value: "1498", age_group: "46 to 70"},
        {date: "01/02/20", value: "3372", age_group: "70 and above"},
        {date: "01/15/20", value: "3368", age_group: "70 and above"},
        {date: "02/03/20", value: "3359", age_group: "70 and above"},
        {date: "02/18/20", value: "3407", age_group: "70 and above"},
        {date: "03/02/20", value: "3354", age_group: "70 and above"},
        {date: "03/16/20", value: "3252", age_group: "70 and above"},
        {date: "04/01/20", value: "2777", age_group: "70 and above"}
        ]

        console.log('long data',long_data)

        var wide = d3.nest()
            .key(function(d) { return d["date"] })
            .rollup(function(d) { 
                return d.reduce(function(prev, curr) {
                prev["date"] = curr["date"];
                prev[curr["age_group"]] = curr["value"];
                return prev;
                }, {});
            })
            .entries(long_data)
            .map(function(d) {
                return d.values;
            });


        console.log('wide data',wide)
    </script>

</body>
</html>

标签： javascriptd3.jsdataformat

解决方案

嗯，这很容易。我只需要改变：

.map(function(d) {
  return d.values;
});

至：

.map(function(d) {
  return d.value;
});

下面的代码有效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>   
</head>
<body>
    <script>
        var long_data = [
        {date: "01/02/20", value: "3628", age_group: "1 to 18"},
        {date: "01/15/20", value: "3634", age_group: "1 to 18"},
        {date: "02/03/20", value: "3619", age_group: "1 to 18"},
        {date: "02/18/20", value: "3593", age_group: "1 to 18"},
        {date: "03/02/20", value: "3605", age_group: "1 to 18"},
        {date: "03/16/20", value: "3444", age_group: "1 to 18"},
        {date: "04/01/20", value: "3007", age_group: "1 to 18"},
        {date: "01/02/20", value: "5753", age_group: "19 to 30"},
        {date: "01/15/20", value: "5817", age_group: "19 to 30"},
        {date: "02/03/20", value: "5850", age_group: "19 to 30"},
        {date: "02/18/20", value: "5826", age_group: "19 to 30"},
        {date: "03/02/20", value: "5881", age_group: "19 to 30"},
        {date: "03/16/20", value: "5685", age_group: "19 to 30"},
        {date: "04/01/20", value: "4876", age_group: "19 to 30"},
        {date: "01/02/20", value: "2347", age_group: "31 to 45"},
        {date: "01/15/20", value: "2356", age_group: "31 to 45"},
        {date: "02/03/20", value: "2394", age_group: "31 to 45"},
        {date: "02/18/20", value: "2427", age_group: "31 to 45"},
        {date: "03/02/20", value: "2418", age_group: "31 to 45"},
        {date: "03/16/20", value: "2371", age_group: "31 to 45"},
        {date: "04/01/20", value: "1993", age_group: "31 to 45"},
        {date: "01/02/20", value: "1691", age_group: "46 to 70"},
        {date: "01/15/20", value: "1727", age_group: "46 to 70"},
        {date: "02/03/20", value: "1721", age_group: "46 to 70"},
        {date: "02/18/20", value: "1736", age_group: "46 to 70"},
        {date: "03/02/20", value: "1726", age_group: "46 to 70"},
        {date: "03/16/20", value: "1707", age_group: "46 to 70"},
        {date: "04/01/20", value: "1498", age_group: "46 to 70"},
        {date: "01/02/20", value: "3372", age_group: "70 and above"},
        {date: "01/15/20", value: "3368", age_group: "70 and above"},
        {date: "02/03/20", value: "3359", age_group: "70 and above"},
        {date: "02/18/20", value: "3407", age_group: "70 and above"},
        {date: "03/02/20", value: "3354", age_group: "70 and above"},
        {date: "03/16/20", value: "3252", age_group: "70 and above"},
        {date: "04/01/20", value: "2777", age_group: "70 and above"}
        ]

        console.log('long data',long_data)

        var wide = d3.nest()
            .key(function(d) { return d["date"] })
            .rollup(function(d) { 
                return d.reduce(function(prev, curr) {
                prev["date"] = curr["date"];
                prev[curr["age_group"]] = curr["value"];
                return prev;
                }, {});
            })
            .entries(long_data)         
            .map(function(d) {
                return d.value;
            });


        console.log('wide data',wide)
    </script>

</body>
</html>

推荐阅读