d3.js
Verwenden von D3 mit JSON und CSV

Syntax

• d3.csv (URL [[, Zeile], Rückruf])
• d3.tsv (URL [[, Zeile], Rückruf])
• d3.html (URL [, Rückruf])
• d3.json (URL [, Rückruf])
• d3.text (URL [, Rückruf])
• d3.xml (URL [, Rückruf])

Laden von Daten aus CSV-Dateien

Es gibt verschiedene Möglichkeiten, die Daten abzurufen, die Sie an die DOM-Elemente binden möchten. Der einfachere ist, Ihre Daten als Array in Ihrem Skript zu haben ...

var data = [ ... ];

Mit D3.js können wir jedoch Daten aus einer externen Datei laden. In diesem Beispiel wird gezeigt, wie Daten aus einer CSV-Datei ordnungsgemäß geladen und verarbeitet werden.

CSV-Dateien sind durch Kommas getrennte Werte . In dieser Art von Datei ist jede Zeile ein Datensatz, wobei jeder Datensatz aus einem oder mehreren Feldern besteht, die durch Kommas getrennt sind. Es ist wichtig zu wissen, dass die Funktion, die wir verwenden werden, d3.csv , die erste Zeile der CSV als Header verwendet , d. d3.csv Die Zeile, die die Namen der Felder enthält.

Betrachten Sie diese CSV mit dem Namen "data.csv":

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

Um "data.csv" zu laden, verwenden wir die Funktion d3.csv . Angenommen, "data.csv" befindet sich im selben Verzeichnis unseres Skripts und der relative Pfad ist einfach "data.csv". Also schreiben wir:

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

Beachten Sie, dass wir im Callback data als Argument verwendet haben. Dies ist eine übliche Praxis in D3, aber Sie können jeden anderen Namen verwenden.

Was macht d3.csv mit unserer CSV? Es konvertiert die CSV in ein Array von Objekten. Wenn wir zum console.log unsere Daten in einer console.log :

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

Das werden wir sehen:

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

Jetzt können wir diese Daten an unsere DOM-Elemente binden.

Beachten Sie, dass in diesem Beispiel population und area Zeichenfolgen sind. Aber wahrscheinlich möchten Sie sie als Zahlen behandeln. Sie können sie in einer Funktion innerhalb des Callbacks (als forEach ) d3.csv , aber in d3.csv Sie eine "Accessor" -Funktion verwenden:

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

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

Sie können Accessoren auch in d3.tsv , jedoch nicht in d3.json .

Hinweis: d3.csv ist eine asynchrone Funktion. Das bedeutet, dass der Code unmittelbar danach ausgeführt wird, sogar bevor die CSV-Datei geladen wird. Daher ist die Verwendung Ihrer data im Callback besonders zu beachten.

Ein oder zwei Parameter im Rückruf - Fehlerbehandlung in d3.request ()

Wenn Sie d3.request() oder einen der Convenience-Konstruktoren ( d3.json , d3.csv , d3.tsv , d3.html und d3.xml ) verwenden, gibt es viele Fehlerquellen. Möglicherweise gibt es Probleme mit der ausgegebenen Anforderung oder deren Antwort aufgrund von Netzwerkfehlern oder die Analyse kann fehlschlagen, wenn der Inhalt nicht ordnungsgemäß formatiert ist.

Innerhalb der Rückrufe, die an eine der oben genannten Methoden übergeben werden, ist es daher wünschenswert, eine Fehlerbehandlung zu implementieren. Zu diesem Zweck können die Rückrufe zwei Argumente akzeptieren, wobei das erste der Fehler ist, falls vorhanden, das zweite die Daten. Wenn beim Laden oder Parsen ein Fehler aufgetreten ist, werden die Informationen zum Fehler als erster error mit den data als null .

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

Sie sind auf keinen Fall verpflichtet, zwei Parameter anzugeben. Es ist vollkommen in Ordnung, die Anforderungsmethoden mit einem Rückruf zu verwenden, der nur einen Parameter enthält. Für diese Art von Rückrufen gibt es eine private Funktion fixCallback() in request.js, die die Art und Weise angibt, in der Informationen an das einzelne Argument der Methode übergeben werden.

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

Dies wird von D3 für alle Rückrufe aufgerufen, die nur einen Parameter haben, der definitionsgemäß die Daten sind.

Egal , wie viele Parameter an die Callback - Anforderung Verfahren zugeführt werden, die Regel für den data ist:

• Wenn die Anforderung fehlschlägt, sind die data null
• Wenn die Anforderung erfolgreich ist, enthalten die data den geladenen (und analysierten) Inhalt

Der einzige Unterschied zwischen der Ein-Parameter- und der Zwei-Parameter-Version besteht in der Art und Weise, in der Informationen über den Fehler bereitgestellt werden, der möglicherweise auftritt. Wenn der error angegeben wird, schlägt die Methode automatisch fehl, und die data als null . Wenn der Rückruf dagegen mit zwei Argumenten definiert ist, werden Informationen über einen Fehler beim Laden oder Parsen an den ersten Parameter übergeben, damit Sie ihn entsprechend behandeln können.

Die folgenden vier Aufrufe von d3.json die möglichen Szenarien für vorhandene / nicht vorhandene Dateien im Vergleich zu einem Parameter / zwei Parameter-Rückrufen:

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