D3.js - Data Handling Basics: Unterschied zwischen den Versionen
Aus Wikizone
| Zeile 12: | Zeile 12: | ||
== Enter / Exit Funktion == | == Enter / Exit Funktion == | ||
https://www.d3indepth.com/enterexit/ | https://www.d3indepth.com/enterexit/ | ||
| + | |||
| + | |||
| + | == Data Patterns == | ||
| + | Beispiele für Data Handling | ||
| + | === Beispiel - Verständnis für Generatoren === | ||
| + | Die Generatoren für Basis Shapes funktionieren alle auf ähnlich. Hier ein einfaches Beispiel. | ||
| + | <pre> | ||
| + | var lineData = [ | ||
| + | {'x': -5, 'y': 5}, | ||
| + | {'x': 5, 'y': -5}, | ||
| + | ]; | ||
| + | var lineGenerator = d3.line( | ||
| + | .x(function(d) { return x(d.x); }) | ||
| + | .y(function(d) { return y(d.y); }); | ||
| + | var linePath = lineGenerator(lineData); | ||
| + | console.log("lineGenerator ",linePath); // svg path string für die Linie | ||
| + | </pre> | ||
Version vom 3. September 2019, 10:12 Uhr
Data Joins
https://www.d3indepth.com/datajoins/
D3.js kann Daten mit Knoten im Dom verbinden (join). Durch diese enge Verbindung von grafischen HTML Elementen und den Daten wird die Darstellung sehr effizient.
Hat man 3 Daten, kann man diese z.B. mit 3 Divs verarbeiten.
Dazu gibt es die Funktionen Enter und Exit, die fehlende oder überschüssige Knoten hinzufügen / entfernen.
Datenformate
Enter / Exit Funktion
https://www.d3indepth.com/enterexit/
Data Patterns
Beispiele für Data Handling
Beispiel - Verständnis für Generatoren
Die Generatoren für Basis Shapes funktionieren alle auf ähnlich. Hier ein einfaches Beispiel.
var lineData = [
{'x': -5, 'y': 5},
{'x': 5, 'y': -5},
];
var lineGenerator = d3.line(
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });
var linePath = lineGenerator(lineData);
console.log("lineGenerator ",linePath); // svg path string für die Linie
