D3.js - Data Handling Basics - Versionsgeschichte

84.136.110.214: /* Data Patterns */

2019-09-03T10:08:34Z

Data Patterns

2019-09-03T09:26:37Z

Data Patterns

2019-09-03T09:26:11Z

Data Patterns

2019-09-03T09:12:28Z

2019-08-29T14:24:43Z

2019-08-29T12:47:02Z

Die Seite wurde neu angelegt: „== Enter / Exit Funktion == https://www.d3indepth.com/enterexit/“

Neue Seite

== Enter / Exit Funktion ==
https://www.d3indepth.com/enterexit/

← Nächstältere Version		Version vom 3. September 2019, 10:08 Uhr
Zeile 50:		Zeile 50:
	console.log("lineGenerator ",linePath);		console.log("lineGenerator ",linePath);

		+	</pre>
		+	Beispiel für Mittelspeiche bei Bogensegmenten (Gradangaben im Bogrenmaß)
		+	<pre>
		+	// 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;
		+	}
	</pre>		</pre>

@@ Zeile 49: / Zeile 49: @@
    var linePath = lineGenerator(lineData);
    console.log("lineGenerator ",linePath);
 </pre>

@@ Zeile 17: / Zeile 17: @@
 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.
+Die Generatoren für Basis Shapes funktionieren alle auf ähnlich. Hier einfache Beispiele.
 <pre>
 var lineData = [
@@ Zeile 28: / Zeile 30: @@
 var linePath = lineGenerator(lineData);
    console.log("lineGenerator ",linePath); // svg path string für die Linie
 </pre>

← Nächstältere Version		Version vom 3. September 2019, 09:12 Uhr
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>

← Nächstältere Version		Version vom 29. August 2019, 14:24 Uhr
Zeile 1:		Zeile 1:
		+	== 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 ==		== Enter / Exit Funktion ==
	https://www.d3indepth.com/enterexit/		https://www.d3indepth.com/enterexit/