D3.js - 使用 CSV 数据在 Streamgraph 上进行转换答案

【问题标题】：D3.js - Transitions on a Streamgraph using CSV dataD3.js - 使用 CSV 数据在 Streamgraph 上进行转换
【发布时间】：2014-02-21 22:12:47
【问题描述】：

此问题基于 Bostocks Steamgraph transition example，其中使用随机生成器作为数据源。

另一位用户 VividD 编辑了 Bostocks 示例 here 以使用 CSV 作为数据源，但它没有转换。

在这里，我只是尝试在两个相似的 CSV 数据集之间进行转换（基于 VividDs 示例），但是我在 transition() 函数中遇到了这个错误：

错误：解析 d="" 出现问题

这里是主文件

    <!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">         
<title></title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

<style>
    body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        margin: 0;
        position: relative;
        width: 100px;
        background-color:#FFFFFF; 
        /*<!--#053749;-->*/
    }

    button {
        position: absolute;
        right: 10px;
        top: 10px;
    }
    svg{
        margin-top: 50px;
    }

</style>

<body>
    <div id="layerTitle"></div>
    <button onclick="transition()">Update</button>
    <script type="text/javascript">

        var format = d3.time.format("%m/%d/%Y");
        var dataset1, dataset2, layers0, layers1, area;
        d3.csv("data/streamdata.csv", function(error, data) {
            data.forEach(function(d) {
                d.date = format.parse(d.date);
                d.y = parseInt(d.num_visitors) + 1;
                d.x = parseInt(d.index);
            });
            dataset1 = data;
            // window.data = data;
            generateViz();
              $("path").tooltip({
                'container': 'body',
                'placement': 'bottom'
            });
        });
        d3.csv("data/streamdata2.csv", function(error, data) {
            data.forEach(function(d) {
                d.date = format.parse(d.date);
                d.y = parseInt(d.num_visitors) + 1;
                d.x = parseInt(d.index);
            });
            dataset2 = data;
            //window.data = data;

            $("path").tooltip({
                'container': 'body',
                'placement': 'bottom'
            });
        });

        function generateViz() {
            var nest = d3.nest()
                    .key(function(d) {
                        return d.venue;
                    });

            // var n = window.data.length;

            // number of layers, online, guestbook & museum
            var stack = d3.layout.stack().offset("wiggle")
                    .values(function(d, i) {
                        return d.values;

                    });
            //group data by venue
            layers0 = stack(nest.entries(dataset1));
            layers1 = stack(nest.entries(dataset2));

            var m = layers0[0].values.length; // number of samples per layer

            var allValues = layers0[0].values.concat(layers0[1].values).concat(layers0[2].values);
            var allValues2 = layers1[0].values.concat(layers1[1].values).concat(layers1[2].values);
            var allValues3 = allValues.concat(allValues2);
            //            console.log(m);

            var yDomain = d3.max(allValues3, function(d) {
                return d.y0 + d.y;
            });

            var width = 600, height = 200;

            var x = d3.scale.linear()
                    .domain([0, m - 1])
                    .range([0, width]);

            var y = d3.scale.linear()
                    .domain([1, yDomain])
                    .range([height, 0]);

            var color = d3.scale.linear()
                    .range(["#053749", "#6bb9d6"]);

            area = d3.svg.area()
                    .x(function(d) {
                        return x(d.x);
                    })
                    .y0(function(d) {
                        return y(d.y0);
                    })
                    .y1(function(d) {
                        return y(d.y0 + d.y);
                    })
                    .interpolate("cardinal")
                    .tension(0.6);

            var svg = d3.select("body").append("svg")
                    .attr("width", width)
                    .attr("height", height);

            svg.selectAll("path")
                    .data(layers0)
                    .enter().append("path")
                    .attr("d", function(d) {
                        return area(d.values);
                    })
                    .attr("id", function(d) {
                        return d.key;
                    })
                    .attr("title", function(d) {
                        return "visitors from " + d.key;
                    })
                    .style("fill", function() {
                        return color(Math.random());
                    });

        }

        function transition() {
            d3.selectAll("path")
                    .data(function() {
                        var d = layers1;
                        layers1 = layers0;
                        return layers0 = d;
                    })
                    .transition()
                    .duration(3500)
                    .attr("d", area);
        }

    </script>
</body>
</html>

这是第一个 CSV：streamdata.csv

index   date    venue   num_visitors
0   04/08/2013  online  1721
0   04/08/2013  museum  826
0   04/08/2013  guestbook   333
1   04/09/2013  online  1377
1   04/09/2013  museum  840
1   04/09/2013  guestbook   61
2   04/10/2013  online  1849
2   04/10/2013  museum  539
2   04/10/2013  guestbook   191
3   04/11/2013  online  1205
3   04/11/2013  museum  810
3   04/11/2013  guestbook   65
4   04/12/2013  online  1960
4   04/12/2013  museum  957
4   04/12/2013  guestbook   221
5   4/13/2013   online  1215
5   4/13/2013   museum  658
5   4/13/2013   guestbook   384
6   4/14/2013   online  1565
6   4/14/2013   museum  621
6   4/14/2013   guestbook   94
7   4/15/2013   online  1678
7   4/15/2013   museum  710
7   4/15/2013   guestbook   35
8   4/16/2013   online  1267
8   4/16/2013   museum  964
8   4/16/2013   guestbook   8
9   4/17/2013   online  1781
9   4/17/2013   museum  896
9   4/17/2013   guestbook   238
10  4/18/2013   online  1185
10  4/18/2013   museum  712
10  4/18/2013   guestbook   318
11  4/19/2013   online  1097
11  4/19/2013   museum  753
11  4/19/2013   guestbook   132
12  4/20/2013   online  1053
12  4/20/2013   museum  927
12  4/20/2013   guestbook   399
13  4/21/2013   online  1738
13  4/21/2013   museum  653
13  4/21/2013   guestbook   78
14  4/22/2013   online  1491
14  4/22/2013   museum  568
14  4/22/2013   guestbook   72
15  4/23/2013   online  1403
15  4/23/2013   museum  997
15  4/23/2013   guestbook   184
16  4/24/2013   online  1335
16  4/24/2013   museum  987
16  4/24/2013   guestbook   26
17  4/25/2013   online  1964
17  4/25/2013   museum  753
17  4/25/2013   guestbook   239
18  4/26/2013   online  1260
18  4/26/2013   museum  815
18  4/26/2013   guestbook   249
19  4/27/2013   online  1404
19  4/27/2013   museum  817
19  4/27/2013   guestbook   360
20  4/28/2013   online  1790
20  4/28/2013   museum  840
20  4/28/2013   guestbook   163
21  4/29/2013   online  1698
21  4/29/2013   museum  700
21  4/29/2013   guestbook   129
22  4/30/2013   online  1479
22  4/30/2013   museum  921
22  4/30/2013   guestbook   347
23  05/01/2013  online  1093
23  05/01/2013  museum  720
23  05/01/2013  guestbook   278
24  05/02/2013  online  1148
24  05/02/2013  museum  655
24  05/02/2013  guestbook   162
25  05/03/2013  online  1521
25  05/03/2013  museum  806
25  05/03/2013  guestbook   267
26  05/04/2013  online  1365
26  05/04/2013  museum  662
26  05/04/2013  guestbook   232
27  05/05/2013  online  1809
27  05/05/2013  museum  659
27  05/05/2013  guestbook   398
28  05/06/2013  online  1078
28  05/06/2013  museum  999
28  05/06/2013  guestbook   51
29  05/07/2013  online  1477
29  05/07/2013  museum  512
29  05/07/2013  guestbook   385

这里是第二个 csv streamdata2.csv：

    index   date    venue   num_visitors
0   04/08/2013  online  2721
0   04/08/2013  museum  626
0   04/08/2013  guestbook   533
1   04/09/2013  online  1977
1   04/09/2013  museum  740
1   04/09/2013  guestbook   41
2   04/10/2013  online  1149
2   04/10/2013  museum  239
2   04/10/2013  guestbook   291
3   04/11/2013  online  1905
3   04/11/2013  museum  510
3   04/11/2013  guestbook   25
4   04/12/2013  online  1260
4   04/12/2013  museum  757
4   04/12/2013  guestbook   121
5   4/13/2013   online  1915
5   4/13/2013   museum  458
5   4/13/2013   guestbook   284
6   4/14/2013   online  1965
6   4/14/2013   museum  421
6   4/14/2013   guestbook   34
7   4/15/2013   online  1278
7   4/15/2013   museum  310
7   4/15/2013   guestbook   55
8   4/16/2013   online  1967
8   4/16/2013   museum  264
8   4/16/2013   guestbook   10
9   4/17/2013   online  1281
9   4/17/2013   museum  496
9   4/17/2013   guestbook   138
10  4/18/2013   online  1585
10  4/18/2013   museum  412
10  4/18/2013   guestbook   218
11  4/19/2013   online  1497
11  4/19/2013   museum  453
11  4/19/2013   guestbook   232
12  4/20/2013   online  1453
12  4/20/2013   museum  427
12  4/20/2013   guestbook   299
13  4/21/2013   online  1238
13  4/21/2013   museum  453
13  4/21/2013   guestbook   88
14  4/22/2013   online  1891
14  4/22/2013   museum  468
14  4/22/2013   guestbook   42
15  4/23/2013   online  1203
15  4/23/2013   museum  907
15  4/23/2013   guestbook   104
16  4/24/2013   online  1035
16  4/24/2013   museum  907
16  4/24/2013   guestbook   6
17  4/25/2013   online  1064
17  4/25/2013   museum  453
17  4/25/2013   guestbook   209
18  4/26/2013   online  1060
18  4/26/2013   museum  315
18  4/26/2013   guestbook   149
19  4/27/2013   online  1004
19  4/27/2013   museum  517
19  4/27/2013   guestbook   160
20  4/28/2013   online  1090
20  4/28/2013   museum  240
20  4/28/2013   guestbook   103
21  4/29/2013   online  1098
21  4/29/2013   museum  400
21  4/29/2013   guestbook   109
22  4/30/2013   online  1079
22  4/30/2013   museum  221
22  4/30/2013   guestbook   147
23  05/01/2013  online  1893
23  05/01/2013  museum  520
23  05/01/2013  guestbook   178
24  05/02/2013  online  1548
24  05/02/2013  museum  855
24  05/02/2013  guestbook   262
25  05/03/2013  online  1021
25  05/03/2013  museum  406
25  05/03/2013  guestbook   167
26  05/04/2013  online  1065
26  05/04/2013  museum  462
26  05/04/2013  guestbook   132
27  05/05/2013  online  1009
27  05/05/2013  museum  259
27  05/05/2013  guestbook   198
28  05/06/2013  online  1978
28  05/06/2013  museum  499
28  05/06/2013  guestbook   41
29  05/07/2013  online  1077
29  05/07/2013  museum  212
29  05/07/2013  guestbook   285

任何建议都会很棒，谢谢。

【问题讨论】：

对我来说有点像 .tsv
它是一个 CSV。我从必须删除逗号的 Excel 中粘贴它。

标签： javascript d3.js

【解决方案1】：

您的generateViz() 方法会在您的第一个 数据文件被读入后立即被调用。但是，在该方法中，您正在为both 进行数据操作数据集。但由于第二个数据集在代码运行时仍未定义，因此您的层堆栈计算也会返回未定义或空值，从而在您稍后尝试使用它们时导致错误。

关于如何继续，您有两种选择：

选项 1，等到两个文件都可用后再运行您的可视化代码。声明一个布尔变量以指示您已准备好，最初为 false。在每个d3.csv()回调函数中，检查ready是否为真，如果是则调用可视化代码，如果不是，则设置ready=true，以便其他回调函数知道可以安全继续。在generateViz() 函数结束时，您可以安全地启用转换按钮。

选项 2，将依赖于第二个数据集的所有图形代码分离到该文件的回调函数中。您需要重新计算最大值并可能相应地调整您的 y 比例。您仍应跟踪两个代码块是否已成功运行，以便您的 transition() 函数在一切准备就绪之前不会运行。

对于像这样的小型数据集，选项 1 可能是最简单的。如果您预计第二个数据集需要很长时间才能下载，则首选选项 2。

【讨论】：

【解决方案2】：

首先，你的generateViz()函数的右括号{应该在transition()之后，否则它不知道data是什么。

其次，使用文本编辑器打开您的 CSV 文件，并检查所使用的分隔符。应该是逗号。

如果您使用 LibreOffice 编辑并保存了 CSV，则分隔符可能会自动更改为分号。

【讨论】：