Beispiel:Funktionsgraphen-mit-SVG-und-JavaScript.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0;" >
	<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" >
	<style>
svg {
	background: white;
	border: 1px dotted #3983ab;
	width: 95%;
	height: 400px;
	padding: 0;
	position: relative;
}

.axis {
	stroke: #999;
	marker-end: url(#markerArrow);
}

text {
	font-family:verdana;
	font-size: 12px;
}

#graph-label {
	font-family: "Open Sans", sans;
	font-size: 2em;
	font-weight: bold;
	text-shadow: 0px 0px 1px black;
}

#y-label {
	transform: rotate(-90deg);
	transform-origin: 363px 38px;
}

label {
	cursor: pointer;
}

input[name="a"],
input[name="c"] {
	width: 4em;
}

fieldset,
legend {
	background: white;
	border: thin solid black;
	border-radius: 0.2em;
}

legend {
	padding: 0.2em 1em;
}

fieldset p {
	text-align: center;
}
	</style>
	<script>
document.addEventListener("DOMContentLoaded", function () {
	var graph = document.querySelector("#functionGraph"),
		label = document.querySelector("#graph-label"),
		form = document.forms[0],
		a = document.querySelector('input[name="a"]'),
		c = document.querySelector('input[name="c"]');

	function redraw () {
		var xa, ya, xz, yz, txt;

		// die eigentliche lineare Funktion
		function f (x) {
			return Math.floor(
				parseFloat(a.value) * x
				// Karo-Maß ist in 10er-Schritten
				+ 10 * parseInt(c.value)
			);
		}

		// -350 <= x <= 350
		// -200 <= y <= 200

		// Startpunkt des Graphen
		xa = -351;
		ya = -201;

		while (xa <= 350 && (ya <= -200 || ya >= 200)) {
			xa++;
			ya = f(xa);
		}

		// Endpunkt des Graphen
		xz = 351;
		yz = 201;

		while (xz >= -350 && (yz <= -200 || yz >= 200)) {
			xz--;
			yz = f(xz);
		}

		graph.setAttribute(
			"d",
			// Startpunkt absolut (origin 350|200)
			"M" + (350 + xa) + "," + (200 - ya) // Y-Koordinate spiegeln!
			// Endpunkt absolut (origin 350|200)
			+ " L" + (350 + xz) + "," + (200 - yz) // Y-Koordinate spiegeln!
		);

		txt = "f(x)=";

		if (a.value != 1) {
			txt += (a.value == -1 ? "-" : a.value);
		}

		txt += "x";

		if (c.value != 0) {
			txt += (c.value > 0 ? "+" + c.value : c.value);
		}

		label.innerHTML = txt;
	}

	a.addEventListener("change", redraw);
	c.addEventListener("change", redraw);

	form.addEventListener("submit", function (event) {
		redraw();

		/* Standardaktionen des Formulars unterdrücken
		   (wir versenden ja nichts) */
		event.preventDefault();
		event.stopPropagation();

		return false;
	});
});
	</script>
	<title>Beispiel: Funktionsgraphen für lineare Gleichungen</title>
</head>

<body>
	<h1>Funktionsgraphen für lineare Gleichungen</h1>
		<p>
			Dieses Beispiel nutzt die Vorlage eines Koordinatensystems aus dem Artikel <a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Datenvisualisierung/Liniendiagramme#Koordinatensystem_mit_Raster">"Diagramme mit Koordinatensystem"</a>.
		 </p>
		<form>
			<fieldset>
				<legend>Formel</legend>
				<p>
					y =
					<label>
						Faktor a
						<input name="a" step="0.01" type="number" value="1">
					</label>
					* x +
					<label>
						Konstante c
						<input name="c" type="number" value="1">
					</label>
				</p>
			</fieldset>
		</form>
		<svg viewbox="0 0 700 400">
			<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>
				<!-- eine Pfeilspitze -->
				<marker id="markerArrow" markerWidth="130" markerHeight="13" refx="2" refy="6" orient="auto">
					<path d="M0,2 l8,4 l-8,4" fill="none" stroke="#999" stroke-width="1"/>
				</marker>
			</defs>
			<!-- Karo-Muster -->
			<rect x="0" y="0" width="700" height="400" fill="url(#grid)"></rect>
			<!-- Ursprungspunkt -->
			<circle cx="350" cy="200" r="4" fill="#c32e04"></circle>
			<!-- X-Achse -->
			<path class="axis" id="x-axis" d="M0,200 h695" />
			<!-- Y-Achse -->
			<path class="axis" id="y-axis" d="M350,400 v-395" />
			<!-- Linie des Funktionsgraphen -->
			<path id="functionGraph" d="M140,400 L540,0" stroke="#0f0" />
			<!-- Beschriftung des Ursprungspunktes -->
			<text x="360" y="220" fill="darkslategray">(0,0)</text>
			<!-- Beschriftung X-Achse -->
			<text id="x-label" x="640" y="195" fill="#999">X-Achse</text>
			<!-- Beschriftung Y-Achse -->
			<text id="y-label" x="340" y="20" fill="#999">Y-Achse</text>
			<!-- Beschriftung des Funktionsgraphen -->
			<text>
				<textPath id="graph-label" fill="#0f0" startOffset="20" xlink:href="#functionGraph">f(x)=x+1</textPath>
			</text>
		</svg>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:Funktionsgraphen-mit-SVG-und-JavaScript.html&oldid=89179“