D3.js - Data Handling Basics

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.

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