Änderungen von Dokument Interaktiv Behälter füllen

Zuletzt geändert von Holger Engels am 2025/12/18 12:53

Von 1.1 nach 2.1

Von Version 2.1

bearbeitet von Stefan Martin
am 2025/12/18 09:48

Änderungskommentar: Es gibt keinen Kommentar für diese Version

Auf Version 7.1

bearbeitet von Holger Engels
am 2025/12/18 12:53

Änderungskommentar: Es gibt keinen Kommentar für diese Version

Rohform
Im Layout

Zusammenfassung

Seiteneigenschaften (2 geändert, 0 hinzugefügt, 0 gelöscht)
Anhänge (0 geändert, 1 hinzugefügt, 0 gelöscht)
- baumdiagramm.html

Details

Seiteneigenschaften

Dokument-Autor

@@ -1,1 +1,1 @@
--XWiki.smartin
++XWiki.holgerengels

Inhalt

@@ -1,8 +1,11 @@
--{{html clean="false"}}
++{{velocity}}
++{{html clean="false" wiki="true"}}
  <iframe
--  src="$doc.getAttachmentURL('wahrscheinlichkeitsbaum.html')"
++  src="$doc.getAttachmentURL('baumdiagramm.html')"
    width="100%"
    height="900px"
    style="border:1px solid #ccc;">
  </iframe>
  {{/html}}
++{{/velocity}}
++

baumdiagramm.html

Author

...	...	@@ -1,0 +1,1 @@
	1	+XWiki.smartin

Größe

...	...	@@ -1,0 +1,1 @@
	1	+24.3 KB

Inhalt

@@ -1,0 +1,765 @@
++<!doctype html>
++<html lang="de">
++<head>
++  <meta charset="utf-8" />
++  <meta name="viewport" content="width=device-width, initial-scale=1" />
++  <title>Interaktiver Wahrscheinlichkeitsbaum (mit/ohne Zurücklegen)</title>
++  <style>
++    :root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
++    body { margin: 0; background: #0b0d12; color: #e9eefc; }
++    header { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
++    h1 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .2px; }
++    .wrap { display: grid; grid-template-columns: 380px 1fr; min-height: calc(100vh - 52px); }
++    .panel {
++      padding: 14px 16px;
++      border-right: 1px solid rgba(255,255,255,.08);
++      background: rgba(255,255,255,.03);
++    }
++    .row { margin: 14px 0; }
++    .label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 10px; }
++    .label b { font-size: 13px; }
++    .label span { font-variant-numeric: tabular-nums; opacity: .9; }
++    textarea {
++      width: 100%;
++      min-height: 88px;
++      resize: vertical;
++      border-radius: 12px;
++      padding: 10px 12px;
++      border: 1px solid rgba(255,255,255,.15);
++      background: rgba(255,255,255,.05);
++      color: inherit;
++      outline: none;
++      font-size: 13px;
++      line-height: 1.35;
++    }
++    input[type="range"] { width: 100%; }
++    .hint { font-size: 12px; line-height: 1.35; opacity: .85; }
++    .stats { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.06); }
++    .stats div { display: flex; justify-content: space-between; margin: 6px 0; font-variant-numeric: tabular-nums; gap: 10px; }
++    .btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
++    button {
++      border: 1px solid rgba(255,255,255,.15);
++      background: rgba(255,255,255,.06);
++      color: inherit;
++      padding: 8px 10px;
++      border-radius: 10px;
++      cursor: pointer;
++      font-size: 13px;
++    }
++    button:hover { background: rgba(255,255,255,.10); }
++
++    .toggle {
++      display: flex; align-items: center; justify-content: space-between;
++      gap: 10px; padding: 10px 12px; border-radius: 12px;
++      background: rgba(255,255,255,.06);
++      border: 1px solid rgba(255,255,255,.10);
++    }
++    .toggle label { font-size: 13px; font-weight: 700; }
++    .switch { position: relative; width: 52px; height: 30px; flex: 0 0 auto; }
++    .switch input{
++      position: absolute;
++      inset: 0;
++      width: 100%;
++      height: 100%;
++      opacity: 0;
++      cursor: pointer;
++      margin: 0;
++      z-index: 2;
++    }
++    .slider{
++      position: absolute; inset: 0;
++      background: rgba(255,255,255,.10);
++      border: 1px solid rgba(255,255,255,.14);
++      transition: .2s; border-radius: 999px;
++      z-index: 1;
++    }
++    .slider:before{
++      position: absolute; content: "";
++      height: 22px; width: 22px; left: 3px; top: 3px;
++      background: rgba(233,238,252,.92);
++      transition: .2s; border-radius: 999px;
++    }
++    .switch input:checked + .slider { background: rgba(120,255,180,.16); }
++    .switch input:checked + .slider:before { transform: translateX(22px); }
++
++    .warn {
++      margin-top: 10px;
++      padding: 10px 12px;
++      border-radius: 12px;
++      border: 1px solid rgba(255,200,120,.28);
++      background: rgba(255,200,120,.10);
++      color: rgba(255,235,200,.95);
++      font-size: 12px;
++      display: none;
++    }
++
++    .canvas { position: relative; overflow: hidden; }
++    .tooltip {
++      position: absolute;
++      pointer-events: none;
++      background: rgba(20, 24, 35, .92);
++      border: 1px solid rgba(255,255,255,.12);
++      padding: 8px 10px;
++      border-radius: 10px;
++      font-size: 12px;
++      max-width: 420px;
++      display: none;
++      box-shadow: 0 14px 40px rgba(0,0,0,.35);
++    }
++    .tooltip .t { font-weight: 700; margin-bottom: 4px; }
++    .tooltip code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
++
++    svg {
++      width: 100%;
++      height: 100%;
++      display: block;
++      background: radial-gradient(900px 500px at 20% 10%, rgba(80,120,255,.10), transparent 60%);
++    }
++
++    /* Labels keep via CSS */
++    .edgeLabel { fill: rgba(233,238,252,.88); font-size: 11px; }
++    .nodeText { fill: rgba(233,238,252,.92); font-size: 11px; }
++    .leafProb { fill: rgba(233,238,252,.92); font-size: 11px; opacity: .95; }
++  </style>
++</head>
++<body>
++  <header>
++    <h1>Interaktiver Wahrscheinlichkeitsbaum (Brüche, mit/ohne Zurücklegen)</h1>
++  </header>
++
++  <div class="wrap">
++    <aside class="panel">
++      <div class="row">
++        <div class="label">
++          <b>Ergebnismenge (mit Elementarwahrscheinlichkeiten als Bruch)</b>
++          <span id="kInfo"></span>
++        </div>
++        <textarea id="outcomes" spellcheck="false">rot (7/13), grün (1/13), gelb (3/13), weiß (2/13)</textarea>
++        <div class="hint">
++          Format: <code>name (a/b)</code>, getrennt mit Komma oder neuer Zeile.
++        </div>
++        <div class="warn" id="parseWarn"></div>
++      </div>
++
++      <div class="row">
++        <div class="toggle" id="toggleBox">
++          <div>
++            <label id="modeLabel">Mit Zurücklegen</label>
++            <div class="hint" style="margin-top:4px;">
++              Ohne Zurücklegen: Wahrscheinlichkeiten ändern sich pro Stufe gemäß Restbestand.
++            </div>
++          </div>
++          <div class="switch">
++            <input id="without" type="checkbox" />
++            <span class="slider"></span>
++          </div>
++        </div>
++      </div>
++
++      <div class="row">
++        <div class="label">
++          <b>Wiederholungen (Stufen/Tiefe)</b>
++          <span id="nVal"></span>
++        </div>
++        <input id="n" type="range" min="1" max="10" step="1" value="3" />
++        <div class="hint">Anzahl Ziehungen / Wiederholungen \(n\).</div>
++        <div class="warn" id="depthWarn"></div>
++      </div>
++
++      <div class="stats">
++        <div><span>Fälle (k)</span><span id="kVal"></span></div>
++        <div><span>Blätter</span><span id="leafCount"></span></div>
++        <div><span>Summe Start-Wahrscheinlichkeiten</span><span id="sumProb"></span></div>
++        <div><span>Ohne Zurücklegen: Gesamtbestand</span><span id="totalMass"></span></div>
++      </div>
++
++      <div class="btns">
++        <button id="fit">Ansicht zentrieren</button>
++        <button id="reset">Zoom zurücksetzen</button>
++        <button id="download">SVG speichern</button>
++        <button id="rerender">Neu zeichnen</button>
++      </div>
++
++      <div class="row hint" style="margin-top:12px;">
++        <b>Interaktion:</b> Ziehen = Pan, Mausrad = Zoom, Hover = Tooltip.
++      </div>
++    </aside>
++
++    <main class="canvas" id="canvas">
++      <div class="tooltip" id="tip">
++        <div class="t" id="tipTitle"></div>
++        <div id="tipBody"></div>
++      </div>
++
++      <svg id="svg" viewBox="0 0 1400 900" preserveAspectRatio="xMidYMid meet">
++        <g id="viewport"></g>
++      </svg>
++    </main>
++  </div>
++
++<script>
++(() => {
++  // ========= Exact rational arithmetic (BigInt) =========
++  const BI = (x) => BigInt(x);
++
++  function gcd(a, b) {
++    a = a < 0n ? -a : a;
++    b = b < 0n ? -b : b;
++    while (b !== 0n) { const t = a % b; a = b; b = t; }
++    return a;
++  }
++  function lcm(a, b) {
++    a = a < 0n ? -a : a;
++    b = b < 0n ? -b : b;
++    if (a === 0n || b === 0n) return 0n;
++    return (a / gcd(a,b)) * b;
++  }
++  function normRat(num, den) {
++    if (den === 0n) throw new Error("Nenner darf nicht 0 sein.");
++    if (den < 0n) { num = -num; den = -den; }
++    const g = gcd(num, den);
++    return { num: num / g, den: den / g };
++  }
++  function addRat(a, b) { return normRat(a.num*b.den + b.num*a.den, a.den*b.den); }
++  function mulRat(a, b) { return normRat(a.num*b.num, a.den*b.den); }
++  function ratToString(r) { return `${r.num.toString()}/${r.den.toString()}`; }
++  function ratToDecimal(r) {
++    const n = Number(r.num), d = Number(r.den);
++    if (!isFinite(n) || !isFinite(d) || d === 0) return "—";
++    const x = n / d;
++    if (x === 0) return "0";
++    if (Math.abs(x) >= 0.001) return x.toFixed(6).replace(/0+$/,'').replace(/\.$/,'');
++    return x.toExponential(3);
++  }
++
++  // ========= UI elements =========
++  const svg = document.getElementById("svg");
++  const viewport = document.getElementById("viewport");
++  const canvas = document.getElementById("canvas");
++
++  const outcomesEl = document.getElementById("outcomes");
++  const withoutEl = document.getElementById("without");
++  const modeLabel = document.getElementById("modeLabel");
++
++  const nSlider = document.getElementById("n");
++  const nVal = document.getElementById("nVal");
++
++  const kInfo = document.getElementById("kInfo");
++  const kVal = document.getElementById("kVal");
++  const leafCount = document.getElementById("leafCount");
++  const sumProb = document.getElementById("sumProb");
++  const totalMass = document.getElementById("totalMass");
++
++  const parseWarn = document.getElementById("parseWarn");
++  const depthWarn = document.getElementById("depthWarn");
++
++  const tip = document.getElementById("tip");
++  const tipTitle = document.getElementById("tipTitle");
++  const tipBody = document.getElementById("tipBody");
++
++  const btnFit = document.getElementById("fit");
++  const btnReset = document.getElementById("reset");
++  const btnDownload = document.getElementById("download");
++  const btnRerender = document.getElementById("rerender");
++
++  // ========= Pan/Zoom =========
++  let panX = 40, panY = 0, zoom = 1;
++  let isPanning = false, startX = 0, startY = 0;
++
++  function applyTransform() {
++    viewport.setAttribute("transform", `translate(${panX},${panY}) scale(${zoom})`);
++  }
++  function resetView() {
++    panX = 40; panY = 0; zoom = 1;
++    applyTransform();
++  }
++
++  // ========= Edge endpoints to circle boundaries =========
++  function edgeEndpoints(from, to, rFrom, rTo) {
++    const dx = to.x - from.x;
++    const dy = to.y - from.y;
++    const len = Math.hypot(dx, dy) || 1;
++    const ux = dx / len;
++    const uy = dy / len;
++    return {
++      x1: from.x + ux * rFrom,
++      y1: from.y + uy * rFrom,
++      x2: to.x - ux * rTo,
++      y2: to.y - uy * rTo
++    };
++  }
++
++  // ========= Parsing: "name (a/b)" =========
++  function parseOutcomes(text) {
++    const raw = text
++      .split(/\n|,/)
++      .map(s => s.trim())
++      .filter(Boolean);
++
++    const items = [];
++    const errors = [];
++
++    const re = /^(.+?)\s*\(\s*([0-9]+)\s*\/\s*([0-9]+)\s*\)\s*$/i;
++
++    for (const part of raw) {
++      const m = part.match(re);
++      if (!m) {
++        errors.push(`Kann nicht lesen: "${part}" (erwartet: name (a/b))`);
++        continue;
++      }
++      const name = m[1].trim();
++      const a = BI(m[2]);
++      const b = BI(m[3]);
++      if (b === 0n) { errors.push(`Nenner 0 bei "${part}"`); continue; }
++      items.push({ name, p: normRat(a, b) });
++    }
++
++    let sum = { num: 0n, den: 1n };
++    for (const it of items) sum = addRat(sum, it.p);
++
++    return { items, errors, sum };
++  }
++
++  // For "ohne Zurücklegen" integer counts via LCM of denominators
++  function probsToCounts(items) {
++    let L = 1n;
++    for (const it of items) L = lcm(L, it.p.den);
++
++    const counts = [];
++    let total = 0n;
++    for (const it of items) {
++      const c = (it.p.num * (L / it.p.den));
++      counts.push({ name: it.name, count: c });
++      total += c;
++    }
++    return { counts, total, L };
++  }
++
++  // ========= Tree building =========
++  function buildTree(items, n, withoutReplacement) {
++    const root = {
++      id: "root",
++      depth: 0,
++      label: "Start",
++      parent: null,
++      edgeP: null,
++      pathP: { num: 1n, den: 1n },
++      pathLabels: [],
++      counts: null
++    };
++
++    const nodes = [root];
++    const edges = [];
++
++    let baseCounts = null;
++    let baseTotal = null;
++
++    if (withoutReplacement) {
++      const { counts, total } = probsToCounts(items);
++      baseCounts = counts;
++      baseTotal = total;
++      root.counts = counts.map(x => ({...x}));
++    }
++
++    let frontier = [root];
++
++    for (let depth = 1; depth <= n; depth++) {
++      const next = [];
++      for (const parent of frontier) {
++        let probs = [];
++
++        if (!withoutReplacement) {
++          probs = items.map(it => ({ name: it.name, p: it.p }));
++        } else {
++          const countsHere = parent.counts;
++          const totalHere = countsHere.reduce((s, x) => s + x.count, 0n);
++          for (const x of countsHere) {
++            if (x.count <= 0n) continue;
++            probs.push({ name: x.name, p: normRat(x.count, totalHere) });
++          }
++        }
++
++        for (const pr of probs) {
++          const id = `${parent.id}-${depth}-${pr.name}`;
++          const child = {
++            id,
++            depth,
++            label: pr.name,
++            parent,
++            edgeP: pr.p,
++            pathP: mulRat(parent.pathP, pr.p),
++            pathLabels: parent.pathLabels.concat(pr.name),
++            counts: null
++          };
++
++          if (withoutReplacement) {
++            const countsChild = parent.counts.map(x => ({...x}));
++            const idx = countsChild.findIndex(x => x.name === pr.name);
++            if (idx >= 0) countsChild[idx].count = countsChild[idx].count - 1n;
++            child.counts = countsChild;
++          }
++
++          nodes.push(child);
++          edges.push({ from: parent, to: child, p: pr.p });
++          next.push(child);
++        }
++      }
++      frontier = next;
++      if (frontier.length === 0) break;
++    }
++
++    return { nodes, edges, baseCounts, baseTotal };
++  }
++
++  // ========= Layout =========
++  function layoutTree(nodes, edges, maxDepth) {
++    const byDepth = new Map();
++    for (const node of nodes) {
++      if (!byDepth.has(node.depth)) byDepth.set(node.depth, []);
++      byDepth.get(node.depth).push(node);
++    }
++
++    const children = new Map();
++    for (const e of edges) {
++      if (!children.has(e.from.id)) children.set(e.from.id, []);
++      children.get(e.from.id).push(e.to);
++    }
++
++    const leaves = nodes.filter(n => (children.get(n.id) || []).length === 0);
++    const maxLeaves = Math.max(1, leaves.length);
++    const yStep = Math.max(22, Math.min(34, Math.floor(680 / maxLeaves)));
++
++    leaves.forEach((leaf, i) => leaf._leafY = i * yStep);
++
++    for (let d = maxDepth - 1; d >= 0; d--) {
++      const level = byDepth.get(d) || [];
++      for (const node of level) {
++        const kids = children.get(node.id) || [];
++        if (kids.length === 0) continue;
++        const ys = kids.map(k => k._leafY);
++        node._leafY = ys.reduce((a,b)=>a+b,0) / ys.length;
++      }
++    }
++
++    const allY = nodes.map(n => n._leafY ?? 0);
++    const minY = Math.min(...allY);
++    const maxY = Math.max(...allY);
++    const h = Math.max(1, maxY - minY);
++
++    const padLeft = 80, padTop = 80;
++    const xStep = 220;
++
++    for (const node of nodes) {
++      node.x = padLeft + node.depth * xStep;
++      node.y = padTop + ((node._leafY - minY) / h) * 720;
++      if (!isFinite(node.y)) node.y = 400;
++    }
++
++    const width = padLeft + (maxDepth + 1) * xStep + 420;
++    const height = padTop + 900;
++    return { width, height, children };
++  }
++
++  // ========= Render =========
++  function clear(el) { while (el.firstChild) el.removeChild(el.firstChild); }
++
++  function updateStats(items, sum, total) {
++    kVal.textContent = items.length ? items.length.toString() : "—";
++    sumProb.textContent = items.length ? `${ratToString(sum)} ≈ ${ratToDecimal(sum)}` : "—";
++
++    const n = parseInt(nSlider.value, 10);
++    const k = items.length || 0;
++
++    if (k > 0) {
++      let pow = 1n;
++      for (let i = 0; i < n; i++) pow *= BI(k);
++      leafCount.textContent = withoutEl.checked ? `${pow.toString()} (max.)` : pow.toString();
++    } else {
++      leafCount.textContent = "—";
++    }
++
++    totalMass.textContent = withoutEl.checked
++      ? (total != null ? total.toString() : "—")
++      : "—";
++  }
++
++  function renderAll() {
++    parseWarn.style.display = "none";
++    depthWarn.style.display = "none";
++
++    const { items, errors, sum } = parseOutcomes(outcomesEl.value);
++
++    if (errors.length) {
++      parseWarn.style.display = "block";
++      parseWarn.textContent = errors.join(" | ");
++      clear(viewport);
++      updateStats(items, sum, null);
++      return;
++    }
++    if (items.length < 2) {
++      parseWarn.style.display = "block";
++      parseWarn.textContent = "Bitte mindestens 2 Ergebnisse eingeben.";
++      clear(viewport);
++      updateStats(items, sum, null);
++      return;
++    }
++
++    if (!(sum.num === sum.den)) {
++      parseWarn.style.display = "block";
++      parseWarn.textContent =
++        `Hinweis: Summe ist ${ratToString(sum)} (sollte 1/1 sein). Zeichne trotzdem.`;
++    }
++
++    const withoutReplacement = withoutEl.checked;
++    modeLabel.textContent = withoutReplacement ? "Ohne Zurücklegen" : "Mit Zurücklegen";
++
++    let n = parseInt(nSlider.value, 10);
++
++    // Limit depth for without replacement
++    let baseTotal = null;
++    if (withoutReplacement) {
++      const tmp = probsToCounts(items);
++      baseTotal = tmp.total;
++
++      if (baseTotal <= 0n) {
++        depthWarn.style.display = "block";
++        depthWarn.textContent = "Ohne Zurücklegen: Gesamtbestand ist 0 (prüfe Eingabe).";
++      } else if (n > Number(baseTotal)) {
++        n = Number(baseTotal);
++        nSlider.value = String(n);
++        depthWarn.style.display = "block";
++        depthWarn.textContent =
++          `Ohne Zurücklegen: Tiefe auf ${n} begrenzt (Gesamtbestand ${baseTotal.toString()}).`;
++      }
++    }
++
++    nVal.textContent = n;
++    kInfo.textContent = `k=${items.length}`;
++
++    const { nodes, edges, baseTotal: bt } = buildTree(items, n, withoutReplacement);
++
++    const maxDepth = Math.max(...nodes.map(x => x.depth));
++    const { width, height, children } = layoutTree(nodes, edges, maxDepth);
++
++    svg.setAttribute("viewBox", `0 0 ${Math.max(1400, width)} ${Math.max(900, height)}`);
++    clear(viewport);
++
++    // Draw edges (to circle boundaries) with robust stroke attributes
++    for (const e of edges) {
++      const rFrom = e.from.depth === 0 ? 18 : 14;
++      const rTo   = e.to.depth   === 0 ? 18 : 14;
++
++      const p = edgeEndpoints(e.from, e.to, rFrom, rTo);
++
++      const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
++      line.setAttribute("x1", p.x1);
++      line.setAttribute("y1", p.y1);
++      line.setAttribute("x2", p.x2);
++      line.setAttribute("y2", p.y2);
++
++      line.setAttribute("stroke", "rgba(233,238,252,0.9)");
++      line.setAttribute("stroke-width", "2.8");
++      line.setAttribute("stroke-linecap", "round");
++
++      viewport.appendChild(line);
++
++      const tx = (p.x1 + p.x2) / 2;
++      const ty = (p.y1 + p.y2) / 2 - 8;
++
++      const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
++      label.setAttribute("x", tx);
++      label.setAttribute("y", ty);
++      label.setAttribute("text-anchor", "middle");
++      label.setAttribute("class", "edgeLabel");
++      label.textContent = ratToString(e.p);
++      viewport.appendChild(label);
++    }
++
++    // Draw nodes + leaf prob as fraction only
++    for (const node of nodes) {
++      const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
++      g.setAttribute("data-id", node.id);
++
++      const c = document.createElementNS("http://www.w3.org/2000/svg", "circle");
++      c.setAttribute("cx", node.x);
++      c.setAttribute("cy", node.y);
++
++      const r = node.depth === 0 ? 18 : 14;
++      c.setAttribute("r", r);
++
++      const isLeaf = ((children.get(node.id) || []).length === 0);
++
++      // Outline only, robust against CSS overrides
++      // Alle Knoten gleich stylen
++      c.setAttribute("fill", "none");
++      c.setAttribute("stroke", "rgba(233,238,252,0.9)");
++      c.setAttribute("stroke-width", "2.4");
++
++      // Node text: write result IN the node (centered)
++      const t = document.createElementNS("http://www.w3.org/2000/svg", "text");
++      t.setAttribute("x", node.x);
++      t.setAttribute("y", node.y + 4);
++      t.setAttribute("text-anchor", "middle");
++      t.setAttribute("class", "nodeText");
++      t.textContent = node.depth === 0 ? "Start" : node.label;
++
++      g.appendChild(c);
++      g.appendChild(t);
++      viewport.appendChild(g);
++
++      // Leaf: only fraction at end of path
++      if (isLeaf && node.depth > 0) {
++        const lp = document.createElementNS("http://www.w3.org/2000/svg", "text");
++        lp.setAttribute("x", node.x + 36);
++        lp.setAttribute("y", node.y + 4);
++        lp.setAttribute("class", "leafProb");
++        lp.textContent = ratToString(node.pathP);
++        viewport.appendChild(lp);
++      }
++
++      // Tooltip
++      g.addEventListener("mousemove", (ev) => {
++        const rect = canvas.getBoundingClientRect();
++        tip.style.left = (ev.clientX - rect.left + 12) + "px";
++        tip.style.top  = (ev.clientY - rect.top + 12) + "px";
++        tip.style.display = "block";
++
++        tipTitle.textContent = node.depth === 0 ? "Start" : `Knoten: ${node.label}`;
++        const path = node.pathLabels.length ? node.pathLabels.join(" → ") : "(leer)";
++        const edgeStr = node.edgeP ? `${ratToString(node.edgeP)} ≈ ${ratToDecimal(node.edgeP)}` : "—";
++        const pathStr = `${ratToString(node.pathP)} ≈ ${ratToDecimal(node.pathP)}`;
++
++        let extra = "";
++        if (withoutReplacement && node.counts) {
++          const remTotal = node.counts.reduce((s,x)=>s+x.count,0n);
++          const parts = node.counts.map(x => `${x.name}: ${x.count.toString()}`).join(", ");
++          extra = `<div style="margin-top:6px;"><b>Restbestand:</b> ${remTotal.toString()}<br><code>${parts}</code></div>`;
++        }
++
++        tipBody.innerHTML =
++          `<div><b>Stufe:</b> ${node.depth}/${maxDepth}</div>` +
++          `<div><b>Pfad:</b> <code>${path}</code></div>` +
++          `<div><b>Kanten-Wahrscheinlichkeit:</b> ${edgeStr}</div>` +
++          `<div><b>Pfad-Wahrscheinlichkeit:</b> ${pathStr}</div>` +
++          extra;
++      });
++      g.addEventListener("mouseleave", () => { tip.style.display = "none"; });
++    }
++
++    updateStats(items, sum, bt ?? baseTotal);
++  }
++
++  // ========= Controls =========
++  function updateAndRender() {
++    nVal.textContent = nSlider.value;
++    renderAll();
++  }
++
++  outcomesEl.addEventListener("input", () => {
++    window.clearTimeout(outcomesEl._t);
++    outcomesEl._t = window.setTimeout(renderAll, 150);
++  });
++
++  withoutEl.addEventListener("change", renderAll);
++  nSlider.addEventListener("input", updateAndRender);
++  btnRerender.addEventListener("click", renderAll);
++
++  btnReset.addEventListener("click", resetView);
++  btnFit.addEventListener("click", resetView);
++
++  btnDownload.addEventListener("click", () => {
++  const serializer = new XMLSerializer();
++  const svgClone = svg.cloneNode(true);
++
++  // explizite Größe setzen (wichtig für PNG)
++  const vb = svg.viewBox.baseVal;
++  svgClone.setAttribute("width", vb.width);
++  svgClone.setAttribute("height", vb.height);
++
++  const svgData = serializer.serializeToString(svgClone);
++  const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
++  const url = URL.createObjectURL(svgBlob);
++
++  const img = new Image();
++  img.onload = () => {
++    const canvas = document.createElement("canvas");
++    canvas.width = vb.width;
++    canvas.height = vb.height;
++
++    const ctx = canvas.getContext("2d");
++
++    // Hintergrundfarbe (weiß statt transparent)
++    ctx.fillStyle = "#ffffff";
++    ctx.fillRect(0, 0, canvas.width, canvas.height);
++
++    ctx.drawImage(img, 0, 0);
++
++    URL.revokeObjectURL(url);
++
++    canvas.toBlob((blob) => {
++      const a = document.createElement("a");
++      a.href = URL.createObjectURL(blob);
++      a.download = "wahrscheinlichkeitsbaum.png";
++      document.body.appendChild(a);
++      a.click();
++      a.remove();
++    }, "image/png");
++  };
++
++  img.src = url;
++});
++
++  // Toggle entire box
++  document.getElementById("toggleBox").addEventListener("click", (e) => {
++    if (e.target.id === "without") return;
++    withoutEl.checked = !withoutEl.checked;
++    renderAll();
++  });
++
++  // Pan
++  svg.addEventListener("mousedown", (ev) => {
++    isPanning = true;
++    startX = ev.clientX;
++    startY = ev.clientY;
++  });
++  window.addEventListener("mouseup", () => { isPanning = false; });
++  window.addEventListener("mousemove", (ev) => {
++    if (!isPanning) return;
++    const dx = ev.clientX - startX;
++    const dy = ev.clientY - startY;
++    startX = ev.clientX;
++    startY = ev.clientY;
++    panX += dx;
++    panY += dy;
++    applyTransform();
++  });
++
++  // Zoom
++  svg.addEventListener("wheel", (ev) => {
++    ev.preventDefault();
++    const delta = Math.sign(ev.deltaY);
++    const factor = delta > 0 ? 0.9 : 1.1;
++
++    const pt = svg.createSVGPoint();
++    pt.x = ev.clientX; pt.y = ev.clientY;
++    const ctm = svg.getScreenCTM();
++    if (!ctm) return;
++    const svgP = pt.matrixTransform(ctm.inverse());
++
++    const prev = zoom;
++    zoom = Math.max(0.2, Math.min(3.5, zoom * factor));
++
++    panX = svgP.x - (svgP.x - panX) * (zoom / prev);
++    panY = svgP.y - (svgP.y - panY) * (zoom / prev);
++
++    applyTransform();
++  }, { passive: false });
++
++  // Init
++  applyTransform();
++  nVal.textContent = nSlider.value;
++  renderAll();
++})();
++</script>
++</body>
++</html>

Änderungen von Dokument Interaktiv Behälter füllen

Zusammenfassung

Details

Hauptnavigation

Suchen

Zuletzt geändert

unfertig	fertig
● ● ● ● ● ● ●