D3.js - Переходы по Streamgraph с использованием данных CSV

Этот вопрос основан на Bostocks Steamgraph transition example, где используется случайный генератор в качестве источника данных.D3.js - Переходы по Streamgraph с использованием данных CSV

Другой пользователь VividD отредактировал пример Бостокс 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>

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

Любые предложения было бы здорово, Thankyou.

источник

2014-02-21 user1744863

Это выглядит как a.tsv мне – jmpyle771

Его CSV. Я вставил его из Excel, который должен удалить запятые. – user1744863

Ваш метод generateViz() вызывается как только ваш первый файл данных был прочитан. Тем не менее, в рамках этого метода вы делаете обработку данных для обоих наборов данных. Но поскольку второй набор данных по-прежнему не определен во время выполнения кода, ваши вычисления в стеке стека также возвращают неопределенные или пустые значения, вызывая ошибку, когда вы позже попытаетесь их использовать.

У вас есть два варианта о том, как действовать:

Вариант 1, подождите, пока оба файл не доступен перед запуском кода визуализации. Объявите логическую переменную, чтобы указать, что вы готовы, изначально false. Внутри каждой функции обратного вызова d3.csv() проверьте, является ли готовое значение истинным, и, если это так, вызовите код визуализации, если нет, установите ready=true, чтобы другая функция обратного вызова узнала, что безопасно продолжать. В конце функции generateViz() вы можете безопасно включить кнопку перехода.

Вариант 2, выделите весь код графического кода, который зависит от второго набора данных в функции обратного вызова этого файла. Вам нужно будет пересчитать максимальное значение и, возможно, соответствующим образом настроить ваш y-масштаб. Вы все равно должны следить за тем, успешно ли выполняются оба блока кода, чтобы ваша функция transition() не запускалась до того, как все будет готово.

Для небольших наборов данных, например, вариант 1, вероятно, самый простой. Вариант 2 был бы предпочтительным, если бы вы ожидали, что второй набор данных займет много времени для загрузки.

источник

2014-02-23 17:29:44 AmeliaBR

Во-первых, закрывающая скобка { вашей generateViz() Function должен быть после transition(), в противном случае он не знает, что data есть.

Во-вторых, откройте файл CSV с помощью текстового редактора и проверьте, какой разделитель используется. Это должно быть запятая.

Если вы использовали LibreOffice для редактирования CSV и сохранили его, скорее всего, разделитель был автоматически изменен на точку с запятой.

источник

2014-06-10 20:24:12 Roman

D3.js - Переходы по Streamgraph с использованием данных CSV

ответ

Смежные вопросы