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

Question

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

我在这里找到了 post，其中包含以下信息：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 中正常工作？非常感谢任何见解！

这里有一个 fiddle 应该有用：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>

Answer 1

好吧，结果很简单。我只需要更改：

.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>

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

update function to transform long data to wide data in d3v4

javascript

dataformat

d3.js