D3.js - 使用CSV數據在Streamgraph上進行轉換

此問題基於Bostocks Steamgraph transition example，其中使用隨機生成器作爲數據源。D3.js - 使用CSV數據在Streamgraph上進行轉換

另一個用戶VividD編輯Bostocks示例here使用CSV作爲數據源，但它沒有過渡。

在這裏，我只是想兩個相似的CSV數據集（基於關閉VividDs例子），但我在歌廳內轉型這個錯誤之間進行轉換（）函數：

Error: Problem parsing 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

任何建議將是巨大的，三江源。如您第一數據文件被讀入

來源

2014-02-21 user1744863

它看起來像一個。tsv給我 – jmpyle771

它的CSV。我從Excel中粘貼它，必須刪除逗號。 – user1744863

你generateViz()方法被立即調用。但是，該方法中，你正在做的數據操作的都數據集。但是由於第二個數據集在運行代碼時仍未定義，因此您的圖層堆棧計算也會返回未定義或空值，因此當您稍後嘗試使用它們時會導致錯誤。

你必須對如何進行兩種選擇：

選項1，等到這兩個文件是運行可視化代碼之前可用。聲明一個布爾變量來表明你準備好了，最初是假的。在每個d3.csv()回調函數中，檢查ready是否爲true，如果是，則調用可視化代碼，如果沒有，則設置ready=true，以便其他回調函數知道繼續安全。在generateViz()函數結束時，您可以安全地啓用轉換按鈕。

選項2，將依賴於第二個數據集的所有圖形代碼分隔到該文件的回調函數中。您需要重新計算最大值，並可能相應地調整您的y尺度。您仍然應該跟蹤兩個代碼塊是否已成功運行，以便您的transition()函數在一切準備就緒之前不會運行。

對於像這樣的小數據集，選項1可能是最簡單的。如果您希望第二個數據集需要很長時間才能下載，則選擇2將是首選。

來源

2014-02-23 17:29:44 AmeliaBR

首先，你generateViz()函數的右括號{應transition()後，否則不知道什麼data是。

其次，使用文本編輯器打開您的CSV文件，並檢查正在使用的分隔符。它應該是一個逗號。

如果您使用LibreOffice編輯CSV並保存它，機會可能是分隔符自動更改爲分號。

來源

2014-06-10 20:24:12 Roman

D3.js - 使用CSV數據在Streamgraph上進行轉換

回答

相關問題