D3.js - API mit durch Trennzeichen getrennten Werten

Ein Trennzeichen ist eine Folge von einem oder mehreren Zeichen, mit denen die Grenze zwischen separaten, unabhängigen Bereichen im Klartext oder in anderen Daten angegeben wird. Ein Feldtrennzeichen ist eine Folge von durch Kommas getrennten Werten. Nun, durch Trennzeichen getrennte Werte sindcomma separated values (CSV) oder tab-separated values(TSV). In diesem Kapitel werden die durch Trennzeichen getrennten Werte ausführlich erläutert.

API konfigurieren

Wir können die API einfach mit der folgenden Syntax laden.

<script src = "https://d3js.org/d3-dsv.v1.min.js"></script>
<script>
   var data = d3.csvParse(string);
</script>

API-Methoden

Im Folgenden sind die verschiedenen API-Methoden der durch Trennzeichen getrennten Werte aufgeführt.

d3.csvParse (Zeichenfolge [, Zeile])
d3.csvParseRows (Zeichenfolge [, Zeile])
d3.csvFormat (Zeilen [, Spalten])
d3.csvFormatRows(rows)
d3.tsvParse (Zeichenfolge [, Zeile])
d3.tsvParseRows (Zeichenfolge [, Zeile])
d3.tsvFormat (Zeilen [, Spalten])
d3.tsvFormatRows(rows)

Lassen Sie uns jede dieser API-Methoden im Detail durchgehen.

d3.csvParse (Zeichenfolge [, Zeile])

Diese Methode wird verwendet, um das CSV-Format zu analysieren. Betrachten Sie die Dateidata.csv das ist unten gezeigt.

year,population
2006,40
2008,45
2010,48
2012,51
2014,53
2016,57
2017,62

Jetzt können wir die oben angegebene Funktion anwenden.

Example - Betrachten wir das folgende Beispiel.

var data = d3.csvParse(string, function(d) {
   return {
      year: new Date(+d.Year, 0, 1), // lowercase and convert "Year" to Date
      population: d.population
   };
});

Hier wird die angegebene Zeichenfolge in den durch Trennzeichen getrennten Werten analysiert. Es gibt ein Array von Objekten zurück, die die analysierten Zeilen darstellen.

d3.csvParseRows (Zeichenfolge [, Zeile])

Diese Methode wird verwendet, um das CSV-Format zu analysieren, das Zeilen entspricht.

var data = d3.csvParseRows(string, function(d, i) {
   return {
      year: new Date(+d[0], 0, 1), // convert first colum column to Date
      population: d[1],
   };
});

Es analysiert jede Zeile in der CSV-Datei.

d3.csvFormat (Zeilen [, Spalten])

Diese Methode wird zum Formatieren der CSV-Zeilen und -Spalten verwendet.

Example - Betrachten wir das folgende Beispiel.

var string = d3.csvFormat(data, ["year", "population"]);

Wenn hier keine Spalten angegeben sind, wird die Liste der Spaltennamen, die die Kopfzeile bilden, durch die Vereinigung aller Eigenschaften aller Objekte in den Zeilen bestimmt. Wenn Spalten angegeben werden, handelt es sich um ein Array von Zeichenfolgen, die die Spaltennamen darstellen.

d3.csvFormatRows (Zeilen)

Diese Methode wird zum Formatieren der CSV-Zeilen verwendet.

Example - Betrachten wir das folgende Beispiel.

var string = d3.csvFormatRows(data.map(function(d, i) {
   return [
      d.year.getFullYear(), // Assuming d.year is a Date object.
      d.population
   ];
}));

Hier formatiert es das angegebene Array von Zeichenfolgenzeilen als durch Trennzeichen getrennte Werte und gibt eine Zeichenfolge zurück.