d3.js
Używanie D3 z JSON i CSV

Składnia

• d3.csv (url [[, wiersz], callback])
• d3.tsv (url [[, wiersz], callback])
• d3.html (url [, callback])
• d3.json (url [, callback])
• d3.text (url [, callback])
• d3.xml (url [, callback])

Ładowanie danych z plików CSV

Istnieje kilka sposobów uzyskania danych, które zostaną powiązane z elementami DOM. Prostszym jest umieszczenie danych w skrypcie jako tablicy ...

var data = [ ... ];

Ale D3.js pozwala nam ładować dane z zewnętrznego pliku. W tym przykładzie zobaczymy, jak prawidłowo ładować i przetwarzać dane z pliku CSV.

Pliki CSV są wartościami oddzielonymi przecinkami . W tego rodzaju plikach każdy wiersz jest rekordem danych, a każdy rekord składa się z jednego lub więcej pól oddzielonych przecinkami. Ważne jest, aby wiedzieć, że funkcja, której będziemy używać, d3.csv , używa pierwszego wiersza CSV jako nagłówka , to znaczy wiersza zawierającego nazwy pól.

Rozważmy więc ten plik CSV o nazwie „data.csv”:

city,population,area
New York,3400,210
Melbourne,1200,350
Tokyo,5200,125
Paris,800,70

Aby załadować „data.csv”, używamy funkcji d3.csv . Aby to ułatwić, załóżmy, że „data.csv” znajduje się w tym samym katalogu naszego skryptu, a jego ścieżka względna to po prostu „data.csv”. Piszemy więc:

d3.csv("data.csv", function(data){
    //code dealing with data here
});

Zauważ, że w wywołaniu zwrotnym wykorzystaliśmy data jako argument. Jest to powszechna praktyka w D3, ale możesz użyć dowolnej innej nazwy.

Co d3.csv robi z naszym CSV? Konwertuje CSV na szereg obiektów. Jeśli na przykład console.log nasze dane:

d3.csv("data.csv", function(data){
    console.log(data)
});

Oto, co zobaczymy:

[
    {
        "city": "New York",
        "population": "3400",
        "area": "210"
    },{
        "city": "Melbourne",
        "population": "1200",
        "area": "350"
    },{
        "city": "Tokyo",
        "population": "5200",
        "area": "125"
    },{
        "city": "Paris",
        "population": "800",
        "area": "70"
    }
]

Teraz możemy powiązać te dane z naszymi elementami DOM.

Zauważ, że w tym przykładzie population i area są łańcuchami. Ale prawdopodobnie chcesz traktować je jako liczby. Możesz je zmienić w funkcji wewnątrz wywołania zwrotnego (jako forEach ), ale w d3.csv możesz użyć funkcji „akcesorium”:

d3.csv("data.csv", conversor, function(data){
    //code here
});

function conversor(d){
    d.population = +d.population;
    d.area = +d.area;
    return d;
}

Możesz także użyć akcesoriów w d3.tsv , ale nie w d3.json .

Uwaga: d3.csv jest funkcją asynchroniczną, co oznacza, że kod po nim zostanie wykonany natychmiast, nawet przed załadowaniem pliku CSV. Dlatego należy zwrócić szczególną uwagę na wykorzystanie data w wywołaniu zwrotnym.

Jeden lub dwa parametry w wywołaniu zwrotnym - obsługa błędów w d3.request ()

Podczas korzystania z d3.request() lub jednego z konstruktorów wygody ( d3.json , d3.csv , d3.tsv , d3.html i d3.xml ) istnieje wiele źródeł błędów. Mogą występować problemy z wydanym żądaniem lub jego odpowiedzią z powodu błędów sieci lub parsowanie może się nie powieść, jeśli treść nie jest poprawnie sformułowana.

Dlatego w ramach wywołań zwrotnych przekazywanych do dowolnej z wyżej wymienionych metod pożądane jest wdrożenie obsługi niektórych błędów. W tym celu wywołania zwrotne mogą przyjmować dwa argumenty, z których pierwszy to ewentualny błąd, a drugi to dane. Jeśli podczas ładowania lub analizowania wystąpi błąd, informacje o błędzie zostaną przekazane jako pierwszy argument error z data null .

d3.json{"some_file.json", function(error, data) {
  if (error) throw error;   // Exceptions handling
  // Further processing if successful
});

Nie musisz jednak podawać dwóch parametrów. Zupełnie dobrze jest używać metod żądania z wywołaniem zwrotnym zawierającym tylko jeden parametr. Aby obsłużyć tego rodzaju wywołania zwrotne, w request.js istnieje prywatna funkcja fixCallback() , która dostosowuje sposób przekazywania informacji do pojedynczego argumentu metody.

function fixCallback(callback) {
  return function(error, xhr) {
    callback(error == null ? xhr : null);
  };
}

Zostanie to wywołane przez D3 dla wszystkich wywołań zwrotnych mających tylko jeden parametr, którym z definicji są dane.

Niezależnie od liczby parametrów dostarczonych do wywołania zwrotnego metody żądania, reguła dla parametru data jest następująca:

• jeśli żądanie nie powiedzie się, data będą miały null
• jeśli żądanie się powiedzie, data będą zawierać załadowaną (i parsowaną) zawartość

Jedyną różnicą między wersją jednoparametrową a wersją dwuparametrową jest sposób dostarczania informacji o możliwym błędzie. Jeśli parametr error zostanie pominięty, metoda po cichu zawiedzie, pozostawiając data jako null . Jeśli z drugiej strony, wywołanie zwrotne ma dwa argumenty, informacja o błędzie podczas ładowania lub analizy zostanie przekazana do pierwszego parametru, umożliwiając odpowiednią obsługę.

Poniższe cztery wywołania do d3.json pokazują możliwe scenariusze dla istniejących / nieistniejących plików w porównaniu z wywołaniami zwrotnymi jednego parametru / dwóch parametrów:

// FAIL: resource not available or content not parsable
// error contains information about the error
// data will be null because of the error
d3.json("non_existing_file.json", function(error, data) {
  console.log("Fail, 2 parameters: ", error, data);
});

// FAIL: resource not available or content not parsable
// no information about the error
// data will be null because of the error
d3.csv("non_existing_file.json", function(data) {
  console.log("Fail, 1 parameter: ", data);
});

// OK: resource loaded successfully
// error is null
// data contains the JSON loaded from the resource
d3.json("existing_file.json", function(error, data) {
  console.log("OK, 2 parameters: ", error, data);
});

// OK: resource loaded successfully
// no information about the error; this fails silently on error
// data contains the JSON loaded from the resource
d3.json("existing_file.json", function(data) {
  console.log("OK, 1 parameter: ", data);
});