d3.js
D3 gebruiken met JSON en CSV

Syntaxis

• 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])

Gegevens laden uit CSV-bestanden

Er zijn verschillende manieren om de gegevens te verkrijgen die u aan de DOM-elementen wilt binden. De eenvoudigste is om uw gegevens in uw script als een array te hebben ...

var data = [ ... ];

Maar met D3.js kunnen we gegevens uit een extern bestand laden. In dit voorbeeld zullen we zien hoe we gegevens uit een CSV-bestand correct kunnen laden en verwerken.

CSV-bestanden zijn door komma's gescheiden waarden . In dit soort bestand is elke regel een gegevensrecord, elk record bestaat uit een of meer velden, gescheiden door komma's. Het is belangrijk om te weten dat de functie die we gaan gebruiken, d3.csv , de eerste regel van de CSV gebruikt als koptekst , dat wil zeggen de regel die de namen van de velden bevat.

Overweeg dus deze CSV, genaamd "data.csv":

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

Om "data.csv" te laden, gebruiken we de functie d3.csv . Stel dat 'data.csv' zich in dezelfde map van ons script bevindt en het relatieve pad is gewoon 'data.csv' om het eenvoudiger te maken. Dus we schrijven:

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

Merk op dat we in de callback data als argument gebruikten. Dat is een gebruikelijke praktijk in D3, maar u kunt elke andere naam gebruiken.

Wat doet d3.csv met onze CSV? Het converteert de CSV in een reeks objecten. Als we bijvoorbeeld onze gegevens console.log :

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

Dit gaan we zien:

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

Nu kunnen we die gegevens binden aan onze DOM-elementen.

Merk op dat in dit voorbeeld de population en het area tekenreeksen zijn. Maar waarschijnlijk wilt u ze als getallen behandelen. Je kunt ze veranderen in een functie in de callback (als een forEach ), maar in d3.csv kun je een "accessor" -functie gebruiken:

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

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

U kunt ook accessors gebruiken in d3.tsv , maar niet in d3.json .

Opmerking: d3.csv is een asynchrone functie, wat betekent dat de code erna onmiddellijk wordt uitgevoerd, zelfs voordat het CSV-bestand wordt geladen. Dus speciale aandacht voor het gebruik van uw data in de callback.

Een of twee parameters in callback - foutafhandeling in d3.request ()

Bij het gebruik van d3.request() of een van de gemakconstructors ( d3.json , d3.csv , d3.tsv , d3.html en d3.xml ) zijn er veel bronnen voor fouten. Er kunnen problemen zijn met het verstrekte verzoek of de reactie daarop vanwege netwerkfouten, of het parseren kan mislukken als de inhoud niet goed is gevormd.

Binnen de callbacks die worden doorgegeven aan een van de bovengenoemde methoden, is het daarom wenselijk om enige foutafhandeling te implementeren. Voor dit doel kunnen de callbacks twee argumenten accepteren, waarbij de eerste de eventuele fout is en de tweede de gegevens. Indien tijdens het laden of het ontleden informaties fout een fout opgetreden wordt doorgegeven als eerste argument error met de data wezen null .

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

U bent hoe dan ook niet verplicht om twee parameters op te geven. Het is prima om de aanvraagmethoden te gebruiken met een callback met slechts één parameter. Om dit soort callbacks af te handelen, is er een private functie fixCallback() in request.js, die de manier aanpast waarop informatie wordt doorgegeven aan het enkele argument van de methode.

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

Dit wordt door D3 aangeroepen voor alle callbacks met slechts één parameter, wat per definitie de gegevens zijn.

Ongeacht hoeveel parameters worden geleverd aan de callback van de verzoekmethode, de regel voor de parameter data is:

• als het verzoek mislukt, zijn de data null
• Als het verzoek slaagt, bevatten data de geladen (en ontlede) inhoud

Het enige verschil tussen de versie met één parameter en de versie met twee parameters zit in de manier waarop informatie wordt verstrekt over de fout die kan optreden. Als de parameter error wordt weggelaten, zal de methode falen om data stil te laten als null . Als aan de andere kant de callback is gedefinieerd met twee argumenten, wordt informatie over een fout tijdens het laden of parseren doorgegeven aan de eerste parameter waarmee u deze correct kunt afhandelen.

De volgende vier aanroepen naar d3.json demonstreren de mogelijke scenario's voor bestaande / niet-bestaande bestanden versus één parameter / twee parameter callbacks:

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