CSV do tablicy w d3.js

Question

Używam tego do analizowania pliku CSV i utworzyć dane tablicowe, jak określono w d3 docs:

d3.csv("afile.csv", function(data) { 
    data.forEach(function(d) { 
    d.date = formatDate.parse(d.date); 
    d.price = +d.price; 
}); 

Jednakże, jeżeli po tej metodzie próbuję zadzwonić data[0] mówi to jest niezdefiniowane. Czy to dlatego, że data jest odwołaniem, a raz d3.csv() jest poza zakresem jest niszczone? Jeśli tak, jak mogę to przezwyciężyć. Muszę odwoływać się do danych z d3.csv()

Answer 1

d3.csv to metoda asynchroniczna. Oznacza to, że kod wewnątrz funkcji wywołania zwrotnego jest uruchamiany, gdy dane są ładowane, ale kod po i poza funkcja wywołania zwrotnego zostanie uruchomiona natychmiast po wysłaniu żądania, gdy dane nie są jeszcze dostępne. Innymi słowy:

first(); 
d3.csv("path/to/file.csv", function(rows) { 
    third(); 
}); 
second(); 

Jeśli chcesz korzystać z danych, który jest ładowany przez d3.csv, albo trzeba umieścić ten kod wewnątrz funkcji zwrotnej (gdzie third jest powyżej):

d3.csv("path/to/file.csv", function(rows) { 
    doSomethingWithRows(rows); 
}); 

function doSomethingWithRows(rows) { 
    // do something with rows 
} 

Albo, można go zapisać jako zmienną globalną w oknie, które można następnie odnosić się później:

var rows; 

d3.csv("path/to/file.csv", function(loadedRows) { 
    rows = loadedRows; 
    doSomethingWithRows(); 
}); 

function doSomethingWithRows() { 
    // do something with rows 
} 

Jeśli chcesz, możesz również przypisać dane załadowane wprost do obiektu window, raczej niż deklarowanie zmiennej, a następnie kierowanie dwie różne nazwy:

d3.csv("path/to/file.csv", function(rows) { 
    window.rows = rows; 
    doSomethingWithRows(); 
}); 

function doSomethingWithRows() { 
    // do something with rows 
} 

Answer 2

Można zadeklarować zmienną poza funkcją zwrotną, a następnie przypisać je z wartościami z csv:

var csv_data; 
d3.csv("afile.csv", function(data) { 
    data.forEach(function(d) { 
    d.date = formatDate.parse(d.date); 
    d.price = +d.price; 
    csv_data = data; 
}); 

a następnie użyć csv_data poza zwrotnego

Answer 3

Myślę, że problem jest czas, ponieważ jest to wywołanie asynchroniczne. Tak więc załaduj dane tak, jak masz, ale wywołaj funkcję w kodzie d3 (gdzie Mike ma "doSomethingWithRows()"). Nie podążaj za kodem d3 z dalszym przetwarzaniem (gdzie Mike ma "drugi()"), przenieś ten kod do funkcji "doSomethingWithRows()". Będzie miał dostępne dane i odejdzie ...

Answer 4

Myślę, że problem został już rozwiązany, ale stanąłem przed podobnym problemem, a powyższa dyskusja nie była tak pomocna. Opublikowaliśmy więc, jak wymyśliłem wyjście z tego problemu: tutaj, powodem, dla którego data[0] jest niezdefiniowana, jest prawdopodobnie to, że dane nie są odczytywane przez przeglądarkę. Ten błąd odczytu jest prawdopodobnie spowodowany bezpośrednim załadowaniem pliku danych (csv), tj. Za pomocą następującej komendy d3.csv("myCSVfile.csv",....). Takie podejście może nie działać, ponieważ aplikacje internetowe zwykle wymagają ładowania plików z serwerów internetowych (nie wiesz, dlaczego tak się dzieje). Tak więc lokalny serwer internetowy musi zostać zainstalowany. Użyj tego forum, aby dowiedzieć się, jak: How do I setup a local HTTP server using Python. Zaktualizowany kod, jeśli korzystasz z Pythona 3 do tworzenia lokalnego serwera WWW, to: d3.csv("http://localhost:8000/myCSVfile.csv",.....).