d3.js
Använda D3 med JSON och CSV

Syntax

• d3.csv (url [[, rad], återuppringning])
• d3.tsv (url [[, rad], återuppringning])
• d3.html (url [, återuppringning])
• d3.json (url [, återuppringning])
• d3.text (url [, återuppringning])
• d3.xml (url [, återuppringning])

Laddar data från CSV-filer

Det finns flera sätt att få data som du kommer att binda till DOM-elementen. Den enklare är att ha dina data i ditt skript som en matris ...

var data = [ ... ];

Men D3.js tillåter oss att ladda data från en extern fil. I det här exemplet kommer vi att se hur du laddar och hanterar data från en CSV-fil på rätt sätt.

CSV-filer är kommaseparerade värden . I den här typen av filer är varje rad en dataregistrering, varje post består av ett eller flera fält, åtskilda av komma. Det är viktigt att veta att den funktion vi ska använda, d3.csv , använder den första raden i CSV som rubrik , det vill säga den linje som innehåller namnen på fälten.

Så överväga den här CSV-namnet "data.csv":

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

För att ladda "data.csv" använder vi funktionen d3.csv . För att göra det lättare, antar att "data.csv" finns i samma katalog i vårt skript, och dess relativa sökväg är helt enkelt "data.csv". Så vi skriver:

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

Lägg märke till att vi i dataåteruppringningen använde data som ett argument. Det är vanligt i D3, men du kan använda alla andra namn.

Vad gör d3.csv med vår CSV? Det konverterar CSV i en rad objekt. Om vi till exempel console.log våra data:

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

Det här är vad vi kommer att se:

[
    {
        "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 kan vi binda den informationen till våra DOM-element.

Lägg märke till att i detta exempel är population och area strängar. Men förmodligen vill du ta itu med dem som siffror. Du kan ändra dem i en funktion i återuppringningen (som en för forEach ), men i d3.csv du använda en "accessor" -funktion:

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

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

Du kan också använda accessorer i d3.tsv , men inte i d3.json .

Obs: d3.csv är en asynkron funktion, vilket betyder att koden efter den kommer att köras omedelbart, även innan CSV-filen laddas. Så speciell uppmärksamhet för att använda dina data i återuppringningen.

En eller två parametrar i återuppringning - felhantering i d3.request ()

När du använder d3.request() eller en av bekvämlighetskonstruktörerna ( d3.json , d3.csv , d3.tsv , d3.html och d3.xml ) finns det många källor för fel. Det kan vara problem med den utfärdade begäran eller dess svar på grund av nätverksfel, eller kan parsningen misslyckas om innehållet inte är välformat.

Inom de återuppringningar som skickas till någon av de ovan nämnda metoderna är det därför önskvärt att implementera viss felhantering. För detta ändamål kan återuppringningarna acceptera två argument, varav det första är felet, om något, det andra är uppgifterna. Om något fel uppstått under lastning eller tolkning information om felet kommer att skickas som det första argumentet error med data varelse null .

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

Du är inte alls skyldig att tillhandahålla två parametrar. Det är helt fint att använda förfrågningsmetoderna med en återuppringning som bara innehåller en parameter. För att hantera dessa typer av återuppringningar finns det en privat funktion fixCallback() i request.js, som justerar hur information skickas till metodens enda argument.

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

Detta kommer att åberopas av D3 för alla återuppringningar som bara har en parameter, vilket per definition är data.

Oavsett hur många parametrar levereras till begäran om metodens återuppringning, regeln för data är parameter:

• om begäran misslyckas kommer data att vara null
• om begäran lyckas kommer data att innehålla det laddade (och parsade) innehållet

Den enda skillnaden mellan enparametern kontra tvåparameterversionen är på det sätt som information tillhandahålls om felet som kan uppstå. Om error parametern utelämnas kommer metoden misslyckas tyst lämnar data som null . Om å andra sidan återuppringningen definieras för att ha två argument, kommer information om ett fel under lastning eller parsning att skickas till den första parametern som gör att du kan hantera den på rätt sätt.

Följande fyra samtal till d3.json demonstrerar de scenarier som är möjliga för befintliga / icke-befintliga filer kontra en paramter / två parametrar för återuppringning:

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