Kapitel 2. Lasst uns endlich ein paar Diagramme erstellen!
Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: translation-feedback@oreilly.com
Gehen wir einige Beispiele durch, die dir die Möglichkeiten von D3 zeigen und dich in die Lage versetzen, sofort mit der Lösung realer Probleme zu beginnen - und sei es nur, indem du die Beispiele anpasst. Die ersten beiden Beispiele in diesem Kapitel zeigen dir, wie du aus Datendateien Standard-Streu- und xy-Diagramme mit Achsen erstellst. Die Diagramme sind zwar nicht schön, aber voll funktionsfähig, und es sollte einfach sein, ihr Aussehen zu verbessern und die Konzepte auf andere Datensätze anzuwenden. Das dritte Beispiel ist weniger vollständig. Es ist hauptsächlich eine Demo, um dich davon zu überzeugen, wie einfach es ist, Ereignisbehandlung und Animation in deine Dokumente einzubauen.
Ein erstes Beispiel: Ein einzelner Datensatz
Um unsere Erkundung von D3 zu beginnen, betrachten wir den kleinen, überschaubaren Datensatz in Beispiel 2-1. Die Darstellung dieses einfachen Datensatzes mit D3 bringt uns bereits mit vielen wichtigen Konzepten in Kontakt.
Beispiel 2-1. Ein einfacher Datensatz (examples-simple.tsv)
x y 100 50 200 100 300 150 400 200 500 250
Wie ich bereits in Kapitel 1 erwähnt habe, ist D3 eine JavaScript-Bibliothek zur Manipulation des DOM-Baums, um Informationen visuell darzustellen. Das bedeutet, dass jeder D3-Graph mindestens zwei oder dreibewegliche Teile hat:
Get D3 für die Ungeduldigen now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
