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

Beispiel für Mittelspeiche bei Bogensegmenten (Gradangaben im Bogrenmaß)

// function to calculate middle Spike for textpositioning (spike direction)
const middleSpikeLine = d => {
  const pi = Math.PI;
  const halfPi = pi/2;
  const angles = [x(d.x0), x(d.x1)]; // remember x is circular scale...
  const r = Math.max(0, (y(d.y0) + y(d.y1))); // ...y is radial scale
  const middleAngle = (angles[1] + angles[0]) / 2; // this is rad not grad
  innerRadius = Math.max(0, y(d.y0));
  outerRadius = Math.max(0, y(d.y1));

  var lineData = [
	[middleAngle, innerRadius],
	[middleAngle, outerRadius]
];
  var lineGenerator = d3.radialLine();
  var linePath = lineGenerator(lineData);
  return linePath;
}