ładowanie danych csv d3

Próbuję zaadaptować prosty program scatterplot w D3, aby zaakceptować plik CSV. Kiedy używam danych w pliku, to działa dobrze, ale kiedy próbuję załadować plik CSV, po prostu nie zadziała. Czy jest coś prostego, czego mi brakuje? Zawartość pliku CSV "datatest.csv" jest taka sama jak zestaw danych w kodzie. Sprawdziłem, czy przeglądarka ładuje dane i wygląda na to, że wszyscy tam są. Myślę, że po prostu brakuje mi kroku.ładowanie danych csv d3

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>D3 Demo: Linear scales</title> 
    <script type="text/javascript" src="../d3/d3.v3.js"></script> 
    <style type="text/css"> 
     /* No style rules here yet */  
    </style> 
</head> 
<body> 
    <script type="text/javascript"> 

     //Width and height 
     var w = 900; 
     var h = 500; 
     var padding = 20; 
     var dataset = []; 

//   var dataset = [ 
//       [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], 
//       [410, 12], [475, 44], [25, 67], [85, 21], [220, 88], 
//       [600, 150] 
//      ]; 

     d3.csv("datatest.csv", function(data) { 
     dataset=data 
     }); 



     //Create scale functions 
     var xScale = d3.scale.linear() 
          .domain([0, d3.max(dataset, function(d) { return d[0]; })]) 
          .range([padding, w - padding * 2]); 

     var yScale = d3.scale.linear() 
          .domain([0, d3.max(dataset, function(d) { return d[1]; })]) 
          .range([h - padding, padding]); 

     var rScale = d3.scale.linear() 
          .domain([0, d3.max(dataset, function(d) { return d[1]; })]) 
          .range([2, 5]); 

     //Create SVG element 
     var svg = d3.select("body") 
        .append("svg") 
        .attr("width", w) 
        .attr("height", h); 

     svg.selectAll("circle") 
      .data(dataset) 
      .enter() 
      .append("circle") 
      .attr("cx", function(d) { 
       return xScale(d[0]); 
      }) 
      .attr("cy", function(d) { 
       return yScale(d[1]); 
      }) 
      .attr("r", function(d) { 
       return rScale(d[1]); 
      }); 
    </script> 
</body> 
</html>

To jest zawartość pliku CSV:

x-coordinate, y-coordinate 
5,20 
480,90 
250,50 
100,33 
330,95 
410,12 
475,44 
25,67 
85,21 
220,88 
600,150

Źródło

2013-02-20 English Grad

WAŻNE:

Chociaż odpowiedź tutaj działa, istnieje wbudowana metoda d3.csv.parseRows(), która osiąga ten sam wynik. W tym celu zobacz odpowiedź @ ryanmt (również na tej stronie). Należy jednak pamiętać, że niezależnie od używanej metody, jeśli w pliku CSV znajdują się liczby, należy przekonwertować je z ciągów znaków na javascript Numbers. Możesz to zrobić, przedpisując przeanalizowane wartości za pomocą +. Na przykład w rozwiązaniu podanym tutaj - które nie używa parseRows() - konwersję można uzyskać za pośrednictwem +d["x-coordinate"].

odpowiedź:

CSV parser produkuje tablicę obiektów, zamiast tablicy tablic, które trzeba. Wygląda to tak:

[ 
    {"x-coordinate":"5"," y-coordinate":"20"}, 
    {"x-coordinate":"480"," y-coordinate":"90"}, 
    {"x-coordinate":"250"," y-coordinate":"50"}, 
    {"x-coordinate":"100"," y-coordinate":"33"}, 
    ... 
]

Aby przekształcić go, trzeba użyć map() funkcję:

d3.csv("datatest.csv", function(data) { 
    dataset = data.map(function(d) { return [ +d["x-coordinate"], +d["y-coordinate"] ]; }); 
});

(Uwaga, map() nie jest dostępna w starszych IE Jeśli to się liczy, to istnieje mnóstwo. obejść z d3, jQuery, itp.)

Źródło

2013-02-20 18:05:36 meetamit

W pliku csv mam informacje w zestawie danych skonfigurowanym jako lista rozdzielana przecinkami. każda tablica w zestawie danych ma własną linię w pliku zewnętrznym. Plik CSV jest poprawnie skonfigurowany, nie mogę wymyślić, jak prawidłowo pobrać informacje z pliku –

@ EngishGrad Czy w pierwszym wierszu pliku CSV znajdują się nazwy kolumn? Parser csv d3 zakłada, że wartości pierwszego wiersza odpowiadają nazwom właściwości. Używa tych nazw właściwości do tworzenia tablicy obiektów - nie z tablic. Opierając się na moim zrozumieniu tego, co opisujesz, nie ma mowy, żeby to działało tak, jak to masz. Wypróbuj 'console.log'' przy danych i zobacz, co otrzymasz. – meetamit

Meetamit, dziękuję za pomoc. Opublikowałem zawartość pliku CSV powyżej –

D3 zapewnia wbudowane rozwiązanie tego problemu.

Zamiast dzwonić pod numer .parse(), zadzwoń pod numer .parseRows. Zapewnia to tylko dane jako tablicę, a nie obiekt (w oparciu o wiersz nagłówka).

patrz Documentation.

Źródło

2014-02-21 18:03:20 Ryanmt

Czy możesz podać przykład pracy z '.parseRows'? Dzięki! –

ładowanie danych csv d3

Odpowiedz

Powiązane problemy