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 einfache Beispiele.

Linie (einzelnes Segment)

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

LInie mit radialen Angaben (Radius und Winkel)

var lineData = [
	[0, 80],
	[Math.PI * 0.25, 80],
	[Math.PI * 0.5, 30],
	[Math.PI * 0.75, 80],
	[Math.PI, 80],
	[Math.PI * 1.25, 80],
	[Math.PI * 1.5, 80],
	[Math.PI * 1.75, 80],
	[Math.PI * 2, 80]
];
  var lineGenerator = d3.radialLine();

  var linePath = lineGenerator(lineData);
  console.log("lineGenerator ",linePath);