d3.js
Utilizzo di D3 con JSON e CSV

Sintassi

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

Caricamento di dati da file CSV

Esistono diversi modi per ottenere i dati che verranno associati agli elementi DOM. Il più semplice sta avendo i tuoi dati nel tuo script come un array ...

var data = [ ... ];

Ma D3.js ci consente di caricare i dati da un file esterno. In questo esempio, vedremo come caricare e gestire correttamente i dati da un file CSV.

I file CSV sono valori separati da virgola . In questo tipo di file, ogni riga è un record di dati, ogni record costituito da uno o più campi, separati da virgole. È importante sapere che la funzione che stiamo per utilizzare, d3.csv , utilizza la prima riga del CSV come intestazione , ovvero la riga che contiene i nomi dei campi.

Quindi, considera questo CSV, denominato "data.csv":

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

Per caricare "data.csv", usiamo la funzione d3.csv . Per semplificare, supponiamo che "data.csv" si trovi nella stessa directory del nostro script e che il suo percorso relativo sia semplicemente "data.csv". Quindi, scriviamo:

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

Si noti che, nel callback, abbiamo usato i data come argomento. È una pratica comune in D3, ma puoi usare qualsiasi altro nome.

Che d3.csv fa d3.csv con il nostro CSV? Converte il CSV in una serie di oggetti. Se, ad esempio, console.log nostri dati:

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

Questo è quello che vedremo:

[
    {
        "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"
    }
]

Ora possiamo legare questi dati ai nostri elementi DOM.

Si noti che, in questo esempio, la population e l' area sono stringhe. Ma, probabilmente, vuoi occuparti di loro come numeri. Puoi cambiarli in una funzione all'interno del callback (come forEach ), ma in d3.csv puoi usare una funzione "accessor":

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

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

Puoi anche usare accessors in d3.tsv , ma non in d3.json .

Nota: d3.csv è una funzione asincrona, il che significa che il codice dopo verrà eseguito immediatamente, anche prima del caricamento del file CSV. Quindi, un'attenzione speciale per l'utilizzo dei data all'interno del callback.

Uno o due parametri nella gestione degli errori di richiamata in d3.request ()

Quando si utilizza d3.request() o uno dei costruttori di convenienza ( d3.json , d3.csv , d3.tsv , d3.html e d3.xml ) ci sono molte fonti di errore. Potrebbero esserci problemi con la richiesta emessa o la sua risposta a causa di errori di rete, oppure l'analisi potrebbe non riuscire se il contenuto non è ben formato.

All'interno dei callback passati a uno dei metodi sopra menzionati, è quindi opportuno implementare una gestione degli errori. A tale scopo i callback possono accettare due argomenti, il primo è l'eventuale errore, il secondo i dati. Se si verifica un errore durante il caricamento o l'analisi delle informazioni sull'errore, verrà passato come primo argomento error con i data null .

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

Non sei, in nessun caso, obbligato a fornire due parametri. È perfettamente corretto utilizzare i metodi di richiesta con un callback con un solo parametro. Per gestire questo tipo di callback esiste una funzione privata fixCallback() in request.js, che regola il modo in cui le informazioni vengono passate al singolo argomento del metodo.

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

Questo sarà invocato da D3 per tutti i callback con un solo parametro, che per definizione sono i dati.

Indipendentemente dal numero di parametri forniti al callback del metodo di richiesta, la regola per il parametro data è:

• se la richiesta non riesce, i data saranno null
• se la richiesta ha esito positivo, i data conterranno i contenuti caricati (e analizzati)

L'unica differenza tra la versione a un parametro e quella a due parametri riguarda il modo in cui vengono fornite le informazioni sull'errore che potrebbe verificarsi. Se il parametro error viene omesso, il metodo fallirà silenziosamente lasciando i data come null . Se, d'altra parte, il callback è definito per avere due argomenti, le informazioni su un errore durante il caricamento o l'analisi verranno passate al primo parametro, consentendoti di gestirlo appropriatamente.

Le seguenti quattro chiamate a d3.json dimostrano gli scenari possibili per file esistenti / non esistenti rispetto a un callback paramter / two parameter:

// 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);
});