Diagramm rechts ausrichten

[Friedel]

Hallo,

ich versuche seit Stunden vergeblich, ein Diagramm in einem Div so anzeogen zu lassen, dass das rechte Ende des Diagramms sichtbar ist. Das Diagramm wird auf der Basis von SVG/Tutorials/Datenvisualisierung/Liniendiagramme erzeugt.

Hier ist der Quellcode des Koordinatensystems. Es geht also um ein Div, in dem ein (anfangs) 2000px breites Svg-Element ist. Da der Body maximal 60em breit ist, sollte das Div in jedem Fall kleiner als das Svg sein.

In diesem Svg-Element soll ein Diagramm erzeugt werden, das jeden Monat 10px breiter wird und für jeden Monat einen Punkt im Koordinatensystem enthält. Die aktuellen Punkte werden jeweils rechts angezeigt. Die waagerechte Achse ist also die Zeitachse und rechts ist das aktuelle Datum.

Natürlich soll der aktuelle Wert beim Laden der Seite angezeigt werden. Das Svg soll also rechtsbündig im Div angeordnet sein, sodass man nach links zu den alten Daten scrollen kann.

Wie erreiche ich das?

      <div id="Diagrammbox">
      	<svg>
        	<defs>
          	<pattern id="grid" patternUnits="userSpaceOnUse" width="10" height="10" x="0" y="0">
            	<path d="M0,0 v10 h10" stroke="#57c4ff" fill="none" />
          	</pattern>
        	</defs>
        	<rect x="0" y="0" width="2000" height="600" fill="url(#grid)"></rect>
      	</svg>
      </div><!-- Ende Diagrammbox -->

body {
	max-width: 60em;
	margin: 0 auto;
	font-family:"Sans Serif";
}

svg {
	right: 0;
	margin-right: 0;
	background: #fcc;
	border: thin dotted #999;
	width: 2000px;
	height: 600px;
	overflow: visible;
	padding: 0;
	margin: 0;
}

rect {
	margin-right: 0;
}


#Diagrammbox {
	position: relative;
	border: thin solid #999;
	width: 99%;
	overflow: scroll;
	padding: 0;
}

[Gunnar Bittersmann]

@@Friedel

Natürlich soll der aktuelle Wert beim Laden der Seite angezeigt werden. Das Svg soll also rechtsbündig im Div angeordnet sein, sodass man nach links zu den alten Daten scrollen kann.

Wie erreiche ich das?

Indem du überlegst, wie solch eine Grafik mit Überbreite wohl auf einer arabischen oder hebräischen Seite dargestellt werden würde. Eben: rechtsbündig.

Also kurzerhand direction: rtl. Und für Kindelemente wieder zurück auf ltr. (Alternativtext könnte sonst seltsam aussehen.)

Und tabindex="0" fürs div nicht vergessen, damit man das Ding per Tastatur fokussieren und mit Pfeiltasten scrollen kann.

☞ Codepen: Klimastreifen, direction: rtl

Ergänzung:

Angeregt durch den anderen Thread hab ich noch einen Fork erstellt:

☞ Codepen: Klimastreifen, dir="rtl"

Für beides lassen sich Gründe finden.

🖖 Живіть довго і процвітайте

[Friedel]

Ok, damit ist dann auch klar, warum ich nicht editieren konnte.

Damit funktioniert es wie gewünscht. Ich dachte immer, das sei ausdrücklich für Text und dessen Schreibrichtung gedacht. Aber laut Spezifikation ist das nicht so. Vielen Dank.

[Friedel]

Warum darf ich meinen eigenen Beitrag nicht bearbeiten??? Ich wollte noch den Link zum Fiddle ergänzen.

https://jsfiddle.net/Friedel/os9j3axf/1/