31:T571,Für gerade Linien haben wir folgende Eigenschaften: - `M`: Starte die Linie bei den absoluten Koordinaten x,y (move to) - `m`: Verschiebe den Startpunkt nach rechts um x oder nach unten um x - `L`: Zeichne eine gerade Linie zu den absoluten Koordinaten x,y (line) - `l`: Zeichene eine Linie zu einem Punkt, der x Pixel rechts und y Pixel weiter unten (oder bei negativen Werte) weiter oben steht - `H`: Zeichne eine horizontale Linie zu exakte x-Koordinate (horizontal) - `h`: Zeichne eine Linie x-Pixel nach rechts - `V`: Zeichne eine vertikale Linie zu exakte y-Koordinate (vertical) - `v`: Zeichne eine Linie y-Pixel nach unten - `Z`: Zeichne eine Linie zurück zum Anfang ### Aufgabe - Spielt mit den verschiedenen Buchstaben und Zahlenwerten herum - Ihr könnt dafür auch das Notebook forken und weitere Inputfelder erstellen- - Zu zweit: Schaut euch den Datensatz im Anhang an und erstellt daraus eine Liniengrafik, verwendet dafür die Befehle M, H und V. Fügt noch eine x und y-Achse hinzu, beschriftet die Achsen Wir können natürlich mit Pfaden auch Kurven zeichnen, aber dann wird es schon ziemlich kompliziert. Im Normalfall berechenen wir Kurven mit der `d3.line()`-Funktion. ## Links - [Pfade bei Mozilla Foundation](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) - [SVG Path: Ilustrated guide](https://css-tricks.com/svg-path-syntax-illustrated-guide/)32:[] 2f:{"title":"Der SVG-Pfad","cells":[{"id":0,"value":"# Der SVG-Pfad","pinned":false,"hidden":false,"mode":"md"},{"id":813,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":12,"value":"Ein SVG-Pfad kann so ziemlich alles. Alles, was nicht eine einfache Form wie ein Kreis oder Rechteck ist, kann mit einem Pfad gezeichnet werden. Das klingt grossartig, das Problem: Die Pfad-Syntax ist eher kryptisch. So sieht ein Pfad aus:","pinned":false,"hidden":false,"mode":"md"},{"id":644,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":830,"value":"

Appendix

","pinned":false,"hidden":false,"mode":"html"},{"id":251,"value":"style","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}

Lernziel

Appendix