此问题基于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>
Heres是第一个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
任何建议都会很棒，谢谢你。
答案 0 :(得分：0)
一旦您的第一个数据文件被读入，就会调用您的generateViz()方法。但是，在该方法中，您正在对进行数据操作数据集。但由于第二个数据集在运行代码时仍未定义，因此您的图层堆栈计算也会返回未定义或空值，导致以后尝试使用它们时出错。
您有两种选择：
选项1，等待两个文件都可用，然后再运行可视化代码。声明一个布尔变量来表示你已经准备好了，最初是假的。在每个d3.csv()回调函数中，检查ready是否为true，如果是，则调用可视化代码，如果没有，则设置ready=true，以便其他回调函数知道继续安全。在generateViz()功能结束时，您可以安全地启用转换按钮。
选项2，将依赖于第二个数据集的所有图形代码分离到该文件的回调函数中。您需要重新计算最大值，并可能相应地调整您的y比例。您仍应跟踪两个代码块是否已成功运行，以便在所有内容准备就绪之前，transition()函数不会运行。
对于像这样的小数据集，选项1可能是最简单的。如果您希望第二个数据集需要很长时间才能下载，那么选项2将是首选。
答案 1 :(得分：0)
首先，您的generateViz()函数的结束括号{应该在transition()之后，否则它不知道data是什么。
其次，使用文本编辑器打开CSV文件，并检查正在使用的分隔符。它应该是一个逗号。
如果您使用LibreOffice编辑CSV并保存它，则分隔符可能会自动更改为分号。