Einleitung
  • Willkommen zum D3.js-Tutorial!
  • Entwicklungsumgebung
  • Hello World
  • SVG - Was ist das?
  • SVG - Element: svg
  • SVG - Element: rect
  • SVG - Element: circle
  • SVG - Element: ellipse
  • SVG - Element: line
  • SVG - Element: polyline
  • SVG - Element: path
  • SVG - Element: g
  • SVG - Element: text
  • SVG - Transformationen: Einführung
  • SVG - Transformationen: Beispiel
  • SVG - Grundlagen
Grundfunktionalität
  • Selektoren / Selections
  • Attribute vs. Styles
  • Autom. Elementerzeugung - Array
  • Autom. Elementerzeugung - JSON
  • D3.js Grundlagen
Diagramme und Skalierungen
  • Lineare Skalierung / scaleLinear()
  • Balkendiagramm
  • Zeitliche Skalierung / scaleTime()
  • Zeitstrahl
  • Zeitstrahl - Tooltips hinzufügen
  • Ordinale Skalierung / scaleOrdinal()
  • Bewertungs-Skala
  • Kreis / Ring-Diagramm
  • Linien-Diagramm
  • Diagramme & Skalierungen
Enter, Update, Exit & Animationen
  • Enter Update Exit - Erklärung
  • Enter Update Exit - Beispiel
  • Animationen / transition()
  • Balkendiagramm mit Daten-Update und Animationen
  • Enter Update Exit & Animationen
Zoom & Drag
  • Zoom im Liniendiagramm / d3.zoom()
  • Drag and Drop / d3.drag()
  • Zoom & Drag
Weitere hilfreiche Funktionen von D3
  • Auf einzelne Element-Daten zugreifen / data()
  • Daten filtern / filter()
  • Funktionen nach Element-Erzeugung ausführen / each()
  • HTML-Node aus D3-Objekt erhalten / node()
  • Elemente vor anderen Elementen einfügen / insert()
  • Line-Interpolation / curve()
  • Line-Animation / stroke-dasharray
Anhang - Code-Beispiele
  • Code-Beispiele zum Herunterladen