Gozintograph: Unterschied zwischen den Versionen

Aus FLBK-Wiki
Zur Navigation springen Zur Suche springen
← Zum vorherigen Versionsunterschied
VisuellWikitext
 
(89 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 11: Zeile 11:
== Zusammenhang zu Matrizen ==
== Zusammenhang zu Matrizen ==
Die Informationen eines Gozintographen lassen sich in einer sogenannten '''Gozintomatrix''' darstellen.   
Die Informationen eines Gozintographen lassen sich in einer sogenannten '''Gozintomatrix''' darstellen.   
Diese ist eine Matrix \( A = (a_{ij}) \), bei der das Element \( a_{ij} \) die Anzahl der Einheiten von Komponente \( i \) angibt, die für die Herstellung von Produkt \( j \) benötigt wird.   
Diese ist eine [[Matrix]] \( A = (a_{ij}) \), bei der das Element \( a_{ij} \) die Anzahl der Einheiten von Komponente \( i \) angibt, die für die Herstellung von Produkt \( j \) benötigt wird.   
In der Produktionsplanung kann die benötigte Gesamtmenge aller Einzelteile über die Gleichung
In der Produktionsplanung kann die benötigte Gesamtmenge aller Einzelteile über die Gleichung


Zeile 23: Zeile 23:
Im folgenden Beispiel werden fünf Bauteile \( B_1, B_2, B_3, B_4, B_5 \) aus vier Einzelteilen \( E_1, E_2, E_3, E_4 \) gefertigt.   
Im folgenden Beispiel werden fünf Bauteile \( B_1, B_2, B_3, B_4, B_5 \) aus vier Einzelteilen \( E_1, E_2, E_3, E_4 \) gefertigt.   
Die Pfeile zeigen, welche Einzelteile in welches Bauteil eingehen. Die Zahlen an den Pfeilen geben die Stückzahl an.
Die Pfeile zeigen, welche Einzelteile in welches Bauteil eingehen. Die Zahlen an den Pfeilen geben die Stückzahl an.
<!-- Variante B: Reines SVG + JS (kein JSXGraph) -->
<!-- VARIANTE B – FINAL OPTIMIERT -->
<html>
<html>
<style>
<style>
   .gozinto-wrap { width:95vw; max-width:1000px; height:70vw; max-height:600px; border:0px solid #ccc; }
   .gozinto-wrap {
   svg { width:100%; height:100%; touch-action:none; user-select:none; }
    width:95vw;
   .node-rect { fill:#3498db; stroke:#1f4e78; stroke-width:2; cursor:grab; }
    height:50vw;
   .node-text { font-family: sans-serif; font-size:13px; fill:#000; pointer-events:none; }
    max-width:1100px;
   .edge-line { stroke:#000; stroke-width:2; fill:none; }
    max-height:400px;
    border:0;
    margin:0;
    padding:0;
  }
 
   svg {
    width:100%;
    height:100%;
    touch-action:none;
    user-select:none;
    background:white;
  }
 
   .node-rect {
    fill:#3498db;
    stroke:#1f4e78;
    stroke-width:2;
    cursor:grab;
  }
 
  /* Einheitliche Schriftgröße */
   .node-text, .count-text {
    font-family:sans-serif;
    font-size:14px;
    fill:#000;
    pointer-events:none;
  }
 
   .edge-line {
    stroke:#000;
    stroke-width:2;
    fill:none;
  }
 
   .edge-arrow { fill:#000; }
   .edge-arrow { fill:#000; }
   .count-circle { fill:#fff; stroke:#000; stroke-width:1.5; }
 
   .count-text { font-family:sans-serif; font-size:12px; text-anchor:middle; dominant-baseline:middle; pointer-events:none; }
   .count-circle {
    fill:#fff;
    stroke:#000;
    stroke-width:1.5;
   }
</style>
</style>


<div class="gozinto-wrap">
<div class="gozinto-wrap">
<svg id="gozinto_svg" viewBox="0 0 1400 700" preserveAspectRatio="xMidYMid meet">
<svg id="gozinto_svg_2" viewBox="0 0 1200 450" preserveAspectRatio="xMinYMin meet">
  <!-- edges will be inserted dynamically -->
</svg>
</svg>
</div>
</div>
Zeile 44: Zeile 81:
<script>
<script>
(function(){
(function(){
   const svg = document.getElementById('gozinto_svg');
   const svg = document.getElementById("gozinto_svg_2");


   // Layout scale (convert logical coords to svg px)
   // leicht reduzierte Abstände
   const scale = 100; // 1 unit = 100px
   const scale = 100;
   const yOffset = 50;
  const yOffset = 0;          // früher 5 20 → Grafik rückt nach oben
   const xOffsetGlobal = 120;   // gesamte Grafik leicht nach rechts (zentrieren)


  // Utility: create SVG element
   function svgEl(name, attrs){
   function svgEl(name, attrs){
     const el = document.createElementNS('http://www.w3.org/2000/svg', name);
     const el = document.createElementNS("http://www.w3.org/2000/svg", name);
     for(const k in (attrs||{})) el.setAttribute(k, attrs[k]);
     for(const k in (attrs||{})) el.setAttribute(k, attrs[k]);
     return el;
     return el;
   }
   }


   // Node factory: creates a rect group with fixed size but movable
  function getSVGcoords(evt){
    const pt = svg.createSVGPoint();
    pt.x = evt.clientX;
    pt.y = evt.clientY;
    return pt.matrixTransform(svg.getScreenCTM().inverse());
  }
 
   // ----------- NODE -----------
   function createNode(id, cx, cy, w, h, label){
   function createNode(id, cx, cy, w, h, label){
     const g = svgEl('g', {class:'node', 'data-id':id});
    cx += xOffsetGlobal/scale;  // gesamte Grafik nach rechts versetzt
     const rect = svgEl('rect', {
 
       class:'node-rect',
     const g = svgEl("g", {"data-id":id});
       x: (cx - w/2)*scale, y: (cy - h/2)*scale + yOffset,
     const rect = svgEl("rect", {
       width: w*scale, height: h*scale,
       class:"node-rect",
      rx:6, ry:6
       x:(cx-w/2)*scale, y:(cy-h/2)*scale + yOffset,
       width:w*scale, height:h*scale, rx:6, ry:6
    });
 
    const text = svgEl("text", {
      class:"node-text",
      x:cx*scale, y:cy*scale+yOffset,
      "text-anchor":"middle",
      "dominant-baseline":"middle"
     });
     });
    const text = svgEl('text', {class:'node-text', x: cx*scale, y: cy*scale + yOffset, 'text-anchor':'middle', 'dominant-baseline':'middle'});
     text.textContent = label;
     text.textContent = label;


Zeile 73: Zeile 124:
     svg.appendChild(g);
     svg.appendChild(g);


    // state
     const node = {id,cx,cy,w,h,rect,text,g};
     const node = {
      id, cx, cy, w, h, g, rect, text
    };


     // dragging
     // Draggen
     let dragging = false;
     let dragging=false, start={};
    let start = null;


     rect.addEventListener('pointerdown', function(e){
     rect.addEventListener("pointerdown", e=>{
       rect.setPointerCapture(e.pointerId);
       rect.setPointerCapture(e.pointerId);
       dragging = true;
       dragging=true;
       start = {x:e.clientX, y:e.clientY, cx:node.cx, cy:node.cy};
      const p = getSVGcoords(e);
       start = {px:p.x, py:p.y, cx:node.cx, cy:node.cy};
     });
     });
     rect.addEventListener('pointermove', function(e){
 
     rect.addEventListener("pointermove", e=>{
       if(!dragging) return;
       if(!dragging) return;
       const dx = (e.clientX - start.x)/scale;
       const p = getSVGcoords(e);
       const dy = (e.clientY - start.y)/scale;
       node.cx = start.cx + (p.x - start.px)/scale;
       node.cx = start.cx + dx;
       node.cy = start.cy + (p.y - start.py)/scale;
      node.cy = start.cy + dy;
       updateNode(node);
       updateNode(node);
       updateAllEdges();
       updateAllEdges();
     });
     });
     rect.addEventListener('pointerup', function(e){
 
       dragging = false;
     rect.addEventListener("pointerup", e=>{
       dragging=false;
       rect.releasePointerCapture(e.pointerId);
       rect.releasePointerCapture(e.pointerId);
     });
     });
    rect.addEventListener('pointercancel', function(e){ dragging=false; });


     return node;
     return node;
   }
   }


   function updateNode(node){
   function updateNode(n){
     node.rect.setAttribute('x', (node.cx - node.w/2)*scale);
     n.rect.setAttribute("x",(n.cx-n.w/2)*scale);
     node.rect.setAttribute('y', (node.cy - node.h/2)*scale + yOffset);
     n.rect.setAttribute("y",(n.cy-n.h/2)*scale+yOffset);
     node.text.setAttribute('x', node.cx*scale);
     n.text.setAttribute("x",n.cx*scale);
     node.text.setAttribute('y', node.cy*scale + yOffset);
     n.text.setAttribute("y",n.cy*scale+yOffset);
   }
   }


   // compute intersection of ray center->target with rectangle border (axis-aligned)
   // ------- Geometrie -------
   function intersectRectBorder(node, targetX, targetY){
   function intersectRectBorder(node, tx, ty){
     const cx = node.cx, cy = node.cy;
     const cx=node.cx, cy=node.cy, w2=node.w/2, h2=node.h/2;
    const dx = targetX - cx, dy = targetY - cy;
     const dx=tx-cx, dy=ty-cy;
    const xMin = node.cx - node.w/2, xMax = node.cx + node.w/2;
     let pts=[];
     const yMin = node.cy - node.h/2, yMax = node.cy + node.h/2;
 
     let tCandidates = [];
     if(Math.abs(dx)>1e-9){
     if(Math.abs(dx) > 1e-9){
       let t1=(-w2)/dx; let y1=cy+t1*dy;
       let t1 = (xMin - cx)/dx;
       if(t1>0 && y1>=cy-h2 && y1<=cy+h2) pts.push({x:cx-w2,y:y1,t:t1});
      let y1 = cy + t1*dy;
       let t2=(w2)/dx; let y2=cy+t2*dy;
       if(t1>0 && y1>=yMin-1e-9 && y1<=yMax+1e-9) tCandidates.push({t:t1,x:xMin,y:y1});
       if(t2>0 && y2>=cy-h2 && y2<=cy+h2) pts.push({x:cx+w2,y:y2,t:t2});
       let t2 = (xMax - cx)/dx;
      let y2 = cy + t2*dy;
       if(t2>0 && y2>=yMin-1e-9 && y2<=yMax+1e-9) tCandidates.push({t:t2,x:xMax,y:y2});
     }
     }
     if(Math.abs(dy) > 1e-9){
     if(Math.abs(dy)>1e-9){
       let t3 = (yMin - cy)/dy;
       let t3=(-h2)/dy; let x3=cx+t3*dx;
      let x3 = cx + t3*dx;
       if(t3>0 && x3>=cx-w2 && x3<=cx+w2) pts.push({x:x3,y:cy-h2,t:t3});
       if(t3>0 && x3>=xMin-1e-9 && x3<=xMax+1e-9) tCandidates.push({t:t3,x:x3,y:yMin});
       let t4=(h2)/dy; let x4=cx+t4*dx;
       let t4 = (yMax - cy)/dy;
       if(t4>0 && x4>=cx-w2 && x4<=cx+w2) pts.push({x:x4,y:cy+h2,t:t4});
      let x4 = cx + t4*dx;
       if(t4>0 && x4>=xMin-1e-9 && x4<=xMax+1e-9) tCandidates.push({t:t4,x:x4,y:yMax});
     }
     }
     if(tCandidates.length===0) return {x:cx,y:cy};
     pts.sort((a,b)=>a.t-b.t);
    tCandidates.sort((a,b)=>a.t-b.t);
     return pts[0] || {x:cx,y:cy};
     return {x:tCandidates[0].x, y:tCandidates[0].y};
   }
   }


  // circle boundary point toward target
   function pointOnCircle(cx,cy,R,tx,ty){
   function pointOnCircle(cx, cy, R, tx, ty){
     const dx=tx-cx, dy=ty-cy;
     const dx = tx - cx, dy = ty - cy;
     const d=Math.sqrt(dx*dx+dy*dy);
     const d = Math.sqrt(dx*dx + dy*dy);
     if(d<1e-9) return {x:cx,y:cy};
     if(d < 1e-9) return {x:cx, y:cy};
     return {x:cx+R*dx/d, y:cy+R*dy/d};
     return {x: cx + R*dx/d, y: cy + R*dy/d};
   }
   }


  // arrowhead path (triangle) at (x,y) pointing to direction (ux,uy)
   function makeArrowHead(x,y,ux,uy,size){
   function makeArrowHead(x, y, ux, uy, size){
     let px=-uy, py=ux;
     // perpendicular
     return `M ${x} ${y}
    const px = -uy, py = ux;
            L ${x-ux*size+px*size*0.5} ${y-uy*size+py*size*0.5}
     const p1x = x, p1y = y;
            L ${x-ux*size-px*size*0.5} ${y-uy*size-py*size*0.5} Z`;
    const p2x = x - ux*size + px*size*0.5;
    const p2y = y - uy*size + py*size*0.5;
    const p3x = x - ux*size - px*size*0.5;
    const p3y = y - uy*size - py*size*0.5;
    return `M ${p1x} ${p1y} L ${p2x} ${p2y} L ${p3x} ${p3y} Z`;
   }
   }


  // Edge structure: {fromNode, toNode, amount, circle, lineA, lineB, arrow}
   const edges=[];
   const edges = [];


   function makeConnection(fromNode, toNode, amount, yMid, xOffset){
   function makeConnection(fromNode,toNode,amount,yMid,xOffset){
     const group = svgEl('g', {});
     const g=svgEl("g",{});
     const circle = svgEl('circle', {class:'count-circle'});
     const lineA=svgEl("path",{class:"edge-line"});
     const text = svgEl('text', {class:'count-text'});
     const lineB=svgEl("path",{class:"edge-line"});
     const lineA = svgEl('path', {class:'edge-line', fill:'none'}); // from rect -> circle (path to allow potential future styling)
     const circle=svgEl("circle",{class:"count-circle"});
     const lineB = svgEl('path', {class:'edge-line', fill:'none'});
     const text=svgEl("text",{class:"count-text"});
     const arrow = svgEl('path', {class:'edge-arrow'});
     const arrow=svgEl("path",{class:"edge-arrow"});
    group.appendChild(lineA);
    group.appendChild(lineB);
    group.appendChild(circle);
    group.appendChild(text);
    group.appendChild(arrow);
    svg.appendChild(group);


     const e = {fromNode, toNode, amount, circle, text, lineA, lineB, arrow, yMid, xOffset};
     text.textContent=amount;
    g.appendChild(lineA);
    g.appendChild(lineB);
    g.appendChild(circle);
    g.appendChild(text);
    g.appendChild(arrow);
    svg.appendChild(g);
 
    let e={fromNode,toNode,amount,yMid,xOffset,circle,text,lineA,lineB,arrow};
     edges.push(e);
     edges.push(e);
     updateEdge(e);
     updateEdge(e);
Zeile 183: Zeile 220:


   function updateEdge(e){
   function updateEdge(e){
    // circle center is midpoint between centers with offset
     const cx=(e.fromNode.cx+e.toNode.cx)/2+(e.xOffset||0);
     const cx = (e.fromNode.cx + e.toNode.cx)/2 + (e.xOffset||0);
     const cy=e.yMid;
     const cy = e.yMid;
     const R=0.14;
     const R = 0.35;
    // compute in logical coords
    const pFrom = intersectRectBorder(e.fromNode, cx, cy);
    const pTo  = intersectRectBorder(e.toNode, cx, cy);
    const cIn = pointOnCircle(cx, cy, R, pFrom.x, pFrom.y);
    const cOut = pointOnCircle(cx, cy, R, pTo.x, pTo.y);


     // convert to px
     const pF=intersectRectBorder(e.fromNode,cx,cy);
    function px(p){ return [p.x*scale, p.y*scale + yOffset]; }
     const pT=intersectRectBorder(e.toNode,cx,cy);
     const pf = px(pFrom), pcIn = px(cIn), pcOut = px(cOut), pt = px(pTo);


     // line A: from rect edge -> circle edge (no arrow)
     const pCircleIn=pointOnCircle(cx,cy,R,pF.x,pF.y);
     lineAPath = `M ${pf[0]} ${pf[1]} L ${pcIn[0]} ${pcIn[1]}`;
     const pCircleOut=pointOnCircle(cx,cy,R,pT.x,pT.y);
    e.lineA.setAttribute('d', lineAPath);


     // line B: circle edge -> rect edge (arrowhead drawn separately)
     const px=p=>[p.x*scale, p.y*scale+yOffset];
    e.lineB.setAttribute('d', `M ${pcOut[0]} ${pcOut[1]} L ${pt[0]} ${pt[1]}`);
    const F=px(pF), Ci=px(pCircleIn), Co=px(pCircleOut), T=px(pT);


    // circle
     e.lineA.setAttribute("d",`M ${F[0]} ${F[1]} L ${Ci[0]} ${Ci[1]}`);
    e.circle.setAttribute('cx', (cx*scale));
     e.lineB.setAttribute("d",`M ${Co[0]} ${Co[1]} L ${T[0]} ${T[1]}`);
    e.circle.setAttribute('cy', (cy*scale + yOffset));
     e.circle.setAttribute('r', R*scale);
     e.circle.setAttribute('class','count-circle');


    // text
     e.circle.setAttribute("cx",cx*scale);
     e.text.setAttribute('x', cx*scale);
     e.circle.setAttribute("cy",cy*scale+yOffset);
     e.text.setAttribute('y', cy*scale + yOffset);
     e.circle.setAttribute("r",R*scale);
     e.text.textContent = e.amount;


     // arrow head: compute unit vector from cOut -> pTo
     e.text.setAttribute('x', cx*scale-5);
     var ux = (pt[0]-pcOut[0]), uy = (pt[1]-pcOut[1]);
     e.text.setAttribute('y', cy*scale + yOffset+5);
     var L = Math.sqrt(ux*ux + uy*uy);
 
    if(L<1e-6) L=1;
    let ux=T[0]-Co[0], uy=T[1]-Co[1];
     let L=Math.sqrt(ux*ux+uy*uy); if(L<1e-6) L=1;
     ux/=L; uy/=L;
     ux/=L; uy/=L;
    const arrowSize = 12;
 
     const arrowPath = makeArrowHead(pt[0], pt[1], ux, uy, arrowSize);
     e.arrow.setAttribute("d",makeArrowHead(T[0],T[1],ux,uy,10));
    e.arrow.setAttribute('d', arrowPath);
    e.arrow.setAttribute('class','edge-arrow');
   }
   }


   // create nodes (logical coords)
   function updateAllEdges(){ edges.forEach(updateEdge); }
  const nodes = {};
 
  nodes.E1 = createNode('E1', 0, 6.8, 1.0, 0.6, 'E1');
   // ------------ Nodes ------------
  nodes.E2 = createNode('E2', 2.5, 6.8, 1.0, 0.6, 'E2');
   const nodes={};
   nodes.E3 = createNode('E3', 5, 6.8, 1.0, 0.6, 'E3');
   nodes.E4 = createNode('E4', 7.5, 6.8, 1.0, 0.6, 'E4');


   nodes.B1 = createNode('B1', 0.75, 3, 1.0, 0.6, 'B1');
  // Einzelteile oben
   nodes.B2 = createNode('B2', 2.5, 3, 1.0, 0.6, 'B2');
   nodes.E1=createNode("E1",0,0.5,1.0,0.5,"E1");
   nodes.B3 = createNode('B3', 5, 3, 1.0, 0.6, 'B3');
   nodes.E2=createNode("E2",2.5,0.5,1.0,0.5,"E2");
   nodes.B4 = createNode('B4', 7.5, 3, 1.0, 0.6, 'B4');
   nodes.E3=createNode("E3",5.0,0.5,1.0,0.5,"E3");
  nodes.B5 = createNode('B5', 10, 3, 1.0, 0.6, 'B5');
   nodes.E4=createNode("E4",7.5,0.5,1.0,0.5,"E4");


   // create edges (with small xOffsets to avoid overlap)
   // Bauteile darunter
   makeConnection(nodes.E1, nodes.B1, '2', 5.6, -0.2);
  nodes.B1=createNode("B1",0.75,4.5,1.0,0.5,"B1");
   makeConnection(nodes.E2, nodes.B1, '1', 5.6, 0.2);
   nodes.B2=createNode("B2",2.5,4.5,1.0,0.5,"B2");
  nodes.B3=createNode("B3",5.0,4.5,1.0,0.5,"B3");
   nodes.B4=createNode("B4",7.5,4.5,1.0,0.5,"B4");
  nodes.B5=createNode("B5",10,4.5,1.0,0.5,"B5");


   makeConnection(nodes.E1, nodes.B2, '2', 5.6, -0.2);
  // ------------ Verbindungen ------------
   makeConnection(nodes.E2, nodes.B2, '1', 5.6, 0.2);
   makeConnection(nodes.E1,nodes.B1,"2",2.2,-0.2);
   makeConnection(nodes.E2,nodes.B1,"1",2.2, 0.2);


   makeConnection(nodes.E1, nodes.B3, '1', 5.6, -0.3);
   makeConnection(nodes.E1,nodes.B2,"2",2.2,-0.2);
   makeConnection(nodes.E2, nodes.B3, '1', 5.6,  0.0);
   makeConnection(nodes.E2,nodes.B2,"1",2.2, 0.2);
  makeConnection(nodes.E3, nodes.B3, '1', 5.6, 0.3);


   makeConnection(nodes.E1, nodes.B4, '2', 5.6, -0.3);
   makeConnection(nodes.E1,nodes.B3,"1",2.2,-0.25);
   makeConnection(nodes.E3, nodes.B4, '1', 5.6, 0.0);
   makeConnection(nodes.E2,nodes.B3,"1",2.2, 0.0);
   makeConnection(nodes.E4, nodes.B4, '1', 5.6, 0.3);
   makeConnection(nodes.E3,nodes.B3,"1",2.2, 0.25);


   makeConnection(nodes.E1, nodes.B5, '1', 5.6, -0.2);
   makeConnection(nodes.E1,nodes.B4,"2",2.2,-0.3);
   makeConnection(nodes.E4, nodes.B5, '2', 5.6, 0.2);
  makeConnection(nodes.E3,nodes.B4,"1",2.2, 0.0);
   makeConnection(nodes.E4,nodes.B4,"1",2.2, 0.3);


   // update all edges
   makeConnection(nodes.E1,nodes.B5,"1",2.2,-0.2);
   function updateAllEdges(){ edges.forEach(e=>updateEdge(e)); }
   makeConnection(nodes.E4,nodes.B5,"2",2.2, 0.2);


  // initial update
   updateAllEdges();
   updateAllEdges();
  // re-update edges also when window resizes (visual)
  window.addEventListener('resize', updateAllEdges);
})();
})();
</script>
</script>
</html>
</html>


== Beispiel 2: Rezeptstruktur eines Gerichts ==
Die Gozintomatrix zum oberen Gozintographen kann dann aus der Tabelle
 
{| class="wikitable"
!      !! B1  !! B2 !! B3 !! B4 !! B5
|-
| '''E1'''  || 2  || 2 || 1 || 1
|-
| '''E2'''  || 1  || 1 || 1 || 0
|-
| '''E3'''  || 0  || 0 || 1 || 0
|-
| '''E3'''  || 0  || 0 || 0 || 2
|}
 
abgeleitet werden und ist dann durch
 
:<math>
A = \begin{pmatrix}
2 & 2 & 1 & 2 & 1 \\
1 & 1 & 1 & 0 & 0 \\
0 & 0 & 1 & 1 & 0 \\
0 & 0 & 0 & 1 & 2
\end{pmatrix}
</math>
 
gegeben. Beispielsweise lässt sich aus der ersten Spalte ablesen, dass 2 Einzelteile von E1, 1 Einzelteil von E2 sowie 0 Einzelteile von E3 und E4 für die Herstellung eines Bauteils B1 benötigt werden.
 
=== Produktion von Spielwaren aus Rohstoffen über Zwischenprodukte ===
 
Ein Spielwarenhersteller produziert aus drei Rohstoffen \(R_1, R_2, R_3\) zunächst die beiden Zwischenprodukte \(Z_1, Z_2\), aus denen anschließend die drei Endprodukte \(E_1, E_2, E_3\) gefertigt werden.
 
Die Pfeile im Gozintographen geben an, wie viele Tonnen eines Materials zur Produktion von 1 Tonne des entstehenden Produkts benötigt werden. 
Beispiel: Für die Herstellung von 1 Tonne \(Z_1\) werden 3 Tonnen \(R_1\) und 4 Tonnen \(R_2\) benötigt.
 
<!-- GOZINTOGRAPH: Rohstoffe → Zwischenprodukte → Endprodukte -->
<html>
<html>
<div id="gozinto2" style="width:90vw; max-width:700px; height:60vw; max-height:500px; margin-top:20px;"></div>
<style>
  .gozinto-wrap {
    width:95vw;
    height:60vw;
    max-width:1200px;
    max-height:650px;
    border:0;
    margin:0;
    padding:0;
  }
 
  svg {
    width:100%;
    height:100%;
    touch-action:none;
    user-select:none;
    background:white;
  }
 
  .node-rect {
    fill:#3498db;
    stroke:#1f4e78;
    stroke-width:2;
    cursor:grab;
  }
 
  .node-text, .count-text {
    font-family:sans-serif;
    font-size:14px;
    fill:#000;
    pointer-events:none;
  }
 
  .edge-line {
    stroke:#000;
    stroke-width:2;
    fill:none;
  }
 
  .edge-arrow { fill:#000; }
 
  .count-circle {
    fill:#fff;
    stroke:#000;
    stroke-width:1.5;
  }
</style>
 
<div class="gozinto-wrap">
<svg id="gozinto_svg" viewBox="0 0 1180 600" preserveAspectRatio="xMinYMin meet">
</svg>
</div>
 
<script>
<script>
var brd2 = JXG.JSXGraph.initBoard('gozinto2', {
(function(){
     boundingbox: [-1, 8, 10, -1],
  const svg = document.getElementById("gozinto_svg");
     axis: false,
 
     showNavigation: false,
  const scale = 100;
     showCopyright: false
  const yOffset = 0;
});
  const xOffsetGlobal = 120;
 
  function svgEl(name, attrs){
     const el = document.createElementNS("http://www.w3.org/2000/svg", name);
    for(const k in (attrs||{})) el.setAttribute(k, attrs[k]);
    return el;
  }
 
  function getSVGcoords(evt){
     const pt = svg.createSVGPoint();
     pt.x = evt.clientX;
     pt.y = evt.clientY;
    return pt.matrixTransform(svg.getScreenCTM().inverse());
  }


function box2(x1,y1,x2,y2,text){
  function createNode(id, cx, cy, w, h, label){
     var poly = brd2.create('polygon',[[x1,y1],[x2,y1],[x2,y2],[x1,y2]],{
     cx += xOffsetGlobal/scale;
        fillColor:'#3498db',fillOpacity:0.8,vertices:{visible:false},
 
        borders:{strokeColor:'#1f4e78',strokeWidth:2}
    const g = svgEl("g", {"data-id":id});
    const rect = svgEl("rect", {
      class:"node-rect",
      x:(cx-w/2)*scale, y:(cy-h/2)*scale + yOffset,
      width:w*scale, height:h*scale, rx:6, ry:6
     });
     });
    brd2.create('text',[(x1+x2)/2,(y1+y2)/2,text],
        {anchorX:'middle',anchorY:'middle',strokeColor:'white',fontSize:14});
    return poly;
}


// Zutaten
    const text = svgEl("text", {
var M=box2(0,6,1.5,7,'Mehl');
      class:"node-text",
var W=box2(2,6,3.5,7,'Wasser');
      x:cx*scale, y:cy*scale+yOffset,
var H=box2(4,6,5.5,7,'Hefe');
      "text-anchor":"middle",
var T=box2(2,3.5,3.5,4.5,'Teig');
      "dominant-baseline":"middle"
var S=box2(5,3.5,6.5,4.5,'Soße');
    });
var P=box2(3,1,4.5,2,'Pizza');
    text.textContent = label;


// Pfeile mit Kreisen
     g.appendChild(rect);
function edge2(from,to,label){
     g.appendChild(text);
    var midX=(from[0]+to[0])/2;
     svg.appendChild(g);
    var midY=(from[1]+to[1])/2;
    var dirX=(to[0]-from[0]);
    var dirY=(to[1]-from[1]);
     var len=Math.sqrt(dirX*dirX+dirY*dirY);
     var ux=dirX/len, uy=dirY/len;
    var gap=0.3;
    var p1=[midX-ux*gap, midY-uy*gap];
    var p2=[midX+ux*gap, midY+uy*gap];
    brd2.create('arrow',[from,p1],{strokeColor:'#000',strokeWidth:1.5});
     brd2.create('arrow',[p2,to],{strokeColor:'#000',strokeWidth:1.5});
    brd2.create('circle',[ [midX,midY],0.2 ],{fillColor:'white',strokeColor:'black'});
    brd2.create('text',[midX,midY,label],{anchorX:'middle',anchorY:'middle',fontSize:11});
}


// Beziehungen
    const node = {id,cx,cy,w,h,rect,text,g};
edge2([0.75,6],[2.75,4.5],'2'); // Mehl->Teig
edge2([2.75,6],[2.75,4.5],'1'); // Wasser->Teig
edge2([4.75,6],[2.75,4.5],'0.5'); // Hefe->Teig


edge2([2.75,4.5],[3.75,2],'1'); // Teig->Pizza
    let dragging=false, start={};
edge2([5.75,4.5],[3.75,2],'1'); // Soße->Pizza
</script>
</html>


=== Rezeptstruktur eines Gerichts ===
    rect.addEventListener("pointerdown", e=>{
Im nächsten Beispiel wird der Gozintograph genutzt, um die Zutatenstruktur eines Rezepts zu zeigen.
      rect.setPointerCapture(e.pointerId);
Das Endprodukt „Pizza“ besteht aus mehreren Zwischenprodukten („Teig“, „Soße“) und Basiszutaten.
      dragging=true;
Auch hier zeigen Pfeile mit Zahlen, welche Mengen von Zutaten in die jeweiligen Komponenten eingehen.
      const p = getSVGcoords(e);
      start = {px:p.x, py:p.y, cx:node.cx, cy:node.cy};
    });


<html>
    rect.addEventListener("pointermove", e=>{
<div id="gozinto2" style="width:90vw; max-width:600px; height:60vw; max-height:500px; margin-top:20px;"></div>
      if(!dragging) return;
<script>
      const p = getSVGcoords(e);
var brd2 = JXG.JSXGraph.initBoard('gozinto2', {
      node.cx = start.cx + (p.x - start.px)/scale;
    boundingbox: [-1, 8, 10, -1],
      node.cy = start.cy + (p.y - start.py)/scale;
    axis: false,
      updateNode(node);
    showCopyright: false,
      updateAllEdges();
     showNavigation: false
     });
});


function box2(x1,y1,x2,y2,color){
    rect.addEventListener("pointerup", e=>{
    return brd2.create('polygon',[[x1,y1],[x2,y1],[x2,y2],[x1,y2]],{
      dragging=false;
        fillColor:color,fillOpacity:0.8,vertices:{visible:false},borders:{strokeColor:'#333'}
      rect.releasePointerCapture(e.pointerId);
     });
     });
}


var M1=box2(0,6,1,7,'#e67e22'); // Mehl
    return node;
var W1=box2(2,6,3,7,'#e67e22'); // Wasser
  }
var H1=box2(4,6,5,7,'#e67e22'); // Hefe
 
var T1=box2(1,3,2,4,'#3498db'); // Teig
  function updateNode(n){
var T2=box2(5,3,6,4,'#3498db'); // Soße
    n.rect.setAttribute("x",(n.cx-n.w/2)*scale);
var T3=box2(3,1,4,2,'#2ecc71'); // Pizza
    n.rect.setAttribute("y",(n.cy-n.h/2)*scale+yOffset);
    n.text.setAttribute("x",n.cx*scale);
    n.text.setAttribute("y",n.cy*scale+yOffset);
  }
 
  function intersectRectBorder(node, tx, ty){
    const cx=node.cx, cy=node.cy, w2=node.w/2, h2=node.h/2;
    const dx=tx-cx, dy=ty-cy;
    let pts=[];
 
    if(Math.abs(dx)>1e-9){
      let t1=(-w2)/dx; let y1=cy+t1*dy;
      if(t1>0 && y1>=cy-h2 && y1<=cy+h2) pts.push({x:cx-w2,y:y1,t:t1});
      let t2=(w2)/dx; let y2=cy+t2*dy;
      if(t2>0 && y2>=cy-h2 && y2<=cy+h2) pts.push({x:cx+w2,y:y2,t:t2});
    }
    if(Math.abs(dy)>1e-9){
      let t3=(-h2)/dy; let x3=cx+t3*dx;
      if(t3>0 && x3>=cx-w2 && x3<=cx+w2) pts.push({x:x3,y:cy-h2,t:t3});
      let t4=(h2)/dy; let x4=cx+t4*dx;
      if(t4>0 && x4>=cx-w2 && x4<=cx+w2) pts.push({x:x4,y:cy+h2,t:t4});
    }
    pts.sort((a,b)=>a.t-b.t);
    return pts[0] || {x:cx,y:cy};
  }
 
  function pointOnCircle(cx,cy,R,tx,ty){
    const dx=tx-cx, dy=ty-cy;
    const d=Math.sqrt(dx*dx+dy*dy);
    if(d<1e-9) return {x:cx,y:cy};
    return {x:cx+R*dx/d, y:cy+R*dy/d};
  }
 
  function makeArrowHead(x,y,ux,uy,size){
    let px=-uy, py=ux;
    return `M ${x} ${y}
            L ${x-ux*size+px*size*0.5} ${y-uy*size+py*size*0.5}
            L ${x-ux*size-px*size*0.5} ${y-uy*size-py*size*0.5} Z`;
  }
 
  const edges=[];
 
  function makeConnection(fromNode,toNode,amount,yMid,xOffset){
    const g=svgEl("g",{});
    const lineA=svgEl("path",{class:"edge-line"});
    const lineB=svgEl("path",{class:"edge-line"});
    const circle=svgEl("circle",{class:"count-circle"});
    const text=svgEl("text",{class:"count-text"});
    const arrow=svgEl("path",{class:"edge-arrow"});
 
    text.textContent=amount;


brd2.create('text',[0.4,7.2,'Mehl']);
    g.appendChild(lineA);
brd2.create('text',[2.4,7.2,'Wasser']);
    g.appendChild(lineB);
brd2.create('text',[4.4,7.2,'Hefe']);
    g.appendChild(circle);
brd2.create('text',[1.4,4.2,'Teig']);
    g.appendChild(text);
brd2.create('text',[5.4,4.2,'Soße']);
    g.appendChild(arrow);
brd2.create('text',[3.4,2.2,'Pizza']);
    svg.appendChild(g);


function arrow2(fromX, fromY, toX, toY, label){
    let e={fromNode,toNode,amount,yMid,xOffset,circle,text,lineA,lineB,arrow};
    brd2.create('arrow',[[fromX,fromY],[toX,toY]],{strokeColor:'#555'});
     edges.push(e);
     brd2.create('text',[(fromX+toX)/2,(fromY+toY)/2+0.2,label],{fontSize:10});
    updateEdge(e);
}
  }


// Zutaten -> Teig
  function updateEdge(e){
arrow2(0.5,6,1.5,4,'2');
    const cx=(e.fromNode.cx+e.toNode.cx)/2+(e.xOffset||0);
arrow2(2.5,6,1.5,4,'1');
    const cy=e.yMid;
arrow2(4.5,6,1.5,4,'0.5');
    const R=0.14;
// Teig + Soße -> Pizza
 
arrow2(1.5,3,3.5,2,'1');
    const pF=intersectRectBorder(e.fromNode,cx,cy);
arrow2(5.5,3,3.5,2,'1');
    const pT=intersectRectBorder(e.toNode,cx,cy);
 
    const pCircleIn=pointOnCircle(cx,cy,R,pF.x,pF.y);
    const pCircleOut=pointOnCircle(cx,cy,R,pT.x,pT.y);
 
    const px=p=>[p.x*scale, p.y*scale+yOffset];
    const F=px(pF), Ci=px(pCircleIn), Co=px(pCircleOut), T=px(pT);
 
    e.lineA.setAttribute("d",`M ${F[0]} ${F[1]} L ${Ci[0]} ${Ci[1]}`);
    e.lineB.setAttribute("d",`M ${Co[0]} ${Co[1]} L ${T[0]} ${T[1]}`);
 
    e.circle.setAttribute("cx",cx*scale);
    e.circle.setAttribute("cy",cy*scale+yOffset);
    e.circle.setAttribute("r",R*scale);
 
    e.text.setAttribute('x', cx*scale-5);
    e.text.setAttribute('y', cy*scale + yOffset+5);
 
    let ux=T[0]-Co[0], uy=T[1]-Co[1];
    let L=Math.sqrt(ux*ux+uy*uy); if(L<1e-6) L=1;
    ux/=L; uy/=L;
 
    e.arrow.setAttribute("d",makeArrowHead(T[0],T[1],ux,uy,10));
  }
 
  function updateAllEdges(){ edges.forEach(updateEdge); }
 
  // -----------------------------------------------------
  // NODES
  // -----------------------------------------------------
 
  const nodes={};
 
  // Rohstoffe (oben)
  nodes.R1=createNode("R1",0,0.8,1.0,0.5,"R1");
  nodes.R2=createNode("R2",2.5,0.8,1.0,0.5,"R2");
  nodes.R3=createNode("R3",5.0,0.8,1.0,0.5,"R3");
 
  // Zwischenprodukte (Mitte)
  nodes.Z1=createNode("Z1",1.2,3.3,1.0,0.5,"Z1");
  nodes.Z2=createNode("Z2",3.0,3.3,1.0,0.5,"Z2");
 
  // Endprodukte (unten)
  nodes.E1=createNode("E1",0.5,5.8,1.0,0.5,"E1");
  nodes.E2=createNode("E2",2.5,5.8,1.0,0.5,"E2");
  nodes.E3=createNode("E3",4.5,5.8,1.0,0.5,"E3");
 
  // -----------------------------------------------------
  // VERBINDUNGEN
  // gemäß Tabellen:
  // Rohstoffe → Zwischenprodukte
  // R1→Z1: 3  | R1→Z2: 1
  // R2→Z1: 4  | R2→Z2: 2
  // R3→Z1: 0  | R3→Z2: 3
  // Zwischenprodukte → Endprodukte
  // Z1: (E1=2, E2=1, E3=0)
  // Z2: (E1=1, E2=3, E3=2)
  // -----------------------------------------------------
 
  // R1
  makeConnection(nodes.R1,nodes.Z1,"3",1.8,-0.3);
  makeConnection(nodes.R1,nodes.Z2,"1",1.8, 0.4);
 
  // R2
  makeConnection(nodes.R2,nodes.Z1,"4",1.8,-0.2);
  makeConnection(nodes.R2,nodes.Z2,"2",1.8, 0.2);
 
  // R3
  makeConnection(nodes.R3,nodes.Z2,"3",1.8, 0.0);
 
  // Z1 → Endprodukte
  makeConnection(nodes.Z1,nodes.E1,"2",4.6,-0.2);
  makeConnection(nodes.Z1,nodes.E2,"1",4.6, 0.2);
 
  // Z2 → Endprodukte
  makeConnection(nodes.Z2,nodes.E1,"1",4.6,-0.3);
  makeConnection(nodes.Z2,nodes.E2,"3",4.6, 0.0);
  makeConnection(nodes.Z2,nodes.E3,"2",4.6, 0.3);
 
  updateAllEdges();
})();
</script>
</script>
</html>
</html>
Die vollständigen Mengen seien wie folgt definiert:
{| class="wikitable"
!              !! Z1 !! Z2
|-
| '''R1'''    || 3 || 1
|-
| '''R2'''    || 4 || 2
|-
| '''R3'''    || 0 || 3
|}
{| class="wikitable"
!              !! E1 !! E2 !! E3
|-
| '''Z1'''    || 2 || 1 || 0
|-
| '''Z2'''    || 1 || 3 || 2
|}
Aus diesen Tabellen ergibt sich die **Gozintomatrix Rohstoffe → Endprodukte**, indem die Matrizen miteinander multipliziert werden:
:<math>
RZ = \begin{pmatrix}
3 & 1 \\
4 & 2 \\
0 & 3
\end{pmatrix},
\qquad
ZE = \begin{pmatrix}
2 & 1 & 0 \\
1 & 3 & 2
\end{pmatrix}
</math>
:<math>
RE = RZ \cdot ZE
    = \begin{pmatrix}
3 & 1 \\
4 & 2 \\
0 & 3
\end{pmatrix}
\cdot
\begin{pmatrix}
2 & 1 & 0 \\
1 & 3 & 2
\end{pmatrix}
</math>
Berechnung:
:<math>
RE =
\begin{pmatrix}
3\cdot2 + 1\cdot1  & 3\cdot1 + 1\cdot3 & 3\cdot0 + 1\cdot2 \\
4\cdot2 + 2\cdot1  & 4\cdot1 + 2\cdot3 & 4\cdot0 + 2\cdot2 \\
0\cdot2 + 3\cdot1  & 0\cdot1 + 3\cdot3 & 0\cdot0 + 3\cdot2
\end{pmatrix}
=
\begin{pmatrix}
7 & 6 & 2 \\
10 & 10 & 4 \\
3 & 9 & 6
\end{pmatrix}
</math>
Die Matrix zeigt, wie viele Tonnen der Rohstoffe \(R_1, R_2, R_3\) jeweils zur Herstellung von 1 Tonne der Endprodukte \(E_1, E_2, E_3\) notwendig sind. 
Beispielsweise bedeutet die erste Spalte:
Für 1 Tonne \(E_1\) werden benötigt:
* 7 Tonnen \(R_1\) 
* 10 Tonnen \(R_2\) 
* 3 Tonnen \(R_3\)
Dies ergibt sich daraus, dass die Zwischenprodukte Z1 und Z2 selbst wiederum aus Rohstoffen bestehen.


[[Kategorie:Lineare_Algebra]]
[[Kategorie:Lineare_Algebra]]
[[Kategorie:AHR_WuV_Mathe_GK]]
[[Kategorie:AHR_WuV_Mathe_GK]]

Aktuelle Version vom 17. November 2025, 12:19 Uhr

Ein Gozintograph (von engl. *goes into* = „geht hinein“) ist ein gerichteter Graph, der die Zerlegung eines Endprodukts in seine Einzelteile oder Komponenten beschreibt. Jede Kante stellt dabei eine „Gozinto“-Beziehung dar: Sie zeigt von einer Komponente (Teil) auf das Produkt, in das sie eingeht. Der Gozintograph ist ein zentrales Hilfsmittel in der Produktionsplanung und Stücklistenverwaltung.

Definition

Ein Gozintograph ist ein gerichteter, azyklischer Graph \( G = (V, E) \), wobei:

  • \( V \) die Menge der Knoten darstellt (Produkte oder Teile),
  • \( E \subseteq V \times V \) die gerichteten Kanten darstellt, welche „geht-in“-Beziehungen symbolisieren.

Eine Kante \( (v_i, v_j, a_{ij}) \) mit der Beschriftung \( a_{ij} \) zeigt an, dass zur Herstellung eines Teils \( v_j \) genau \( a_{ij} \) Einheiten von Teil \( v_i \) benötigt werden.

Zusammenhang zu Matrizen

Die Informationen eines Gozintographen lassen sich in einer sogenannten Gozintomatrix darstellen. Diese ist eine Matrix \( A = (a_{ij}) \), bei der das Element \( a_{ij} \) die Anzahl der Einheiten von Komponente \( i \) angibt, die für die Herstellung von Produkt \( j \) benötigt wird. In der Produktionsplanung kann die benötigte Gesamtmenge aller Einzelteile über die Gleichung

\[ \mathbf{x} = (I - A)^{-1} \mathbf{y} \]

bestimmt werden, wobei \( \mathbf{y} \) den Vektor der Endprodukte und \( \mathbf{x} \) den Vektor der benötigten Teilemengen beschreibt.

Beispiele

Produktion eines Produkts aus Einzelteilen

Im folgenden Beispiel werden fünf Bauteile \( B_1, B_2, B_3, B_4, B_5 \) aus vier Einzelteilen \( E_1, E_2, E_3, E_4 \) gefertigt. Die Pfeile zeigen, welche Einzelteile in welches Bauteil eingehen. Die Zahlen an den Pfeilen geben die Stückzahl an.

Die Gozintomatrix zum oberen Gozintographen kann dann aus der Tabelle

B1 B2 B3 B4 B5
E1 2 2 1 1
E2 1 1 1 0
E3 0 0 1 0
E3 0 0 0 2

abgeleitet werden und ist dann durch

[math]\displaystyle{ A = \begin{pmatrix} 2 & 2 & 1 & 2 & 1 \\ 1 & 1 & 1 & 0 & 0 \\ 0 & 0 & 1 & 1 & 0 \\ 0 & 0 & 0 & 1 & 2 \end{pmatrix} }[/math]

gegeben. Beispielsweise lässt sich aus der ersten Spalte ablesen, dass 2 Einzelteile von E1, 1 Einzelteil von E2 sowie 0 Einzelteile von E3 und E4 für die Herstellung eines Bauteils B1 benötigt werden.

Produktion von Spielwaren aus Rohstoffen über Zwischenprodukte

Ein Spielwarenhersteller produziert aus drei Rohstoffen \(R_1, R_2, R_3\) zunächst die beiden Zwischenprodukte \(Z_1, Z_2\), aus denen anschließend die drei Endprodukte \(E_1, E_2, E_3\) gefertigt werden.

Die Pfeile im Gozintographen geben an, wie viele Tonnen eines Materials zur Produktion von 1 Tonne des entstehenden Produkts benötigt werden. Beispiel: Für die Herstellung von 1 Tonne \(Z_1\) werden 3 Tonnen \(R_1\) und 4 Tonnen \(R_2\) benötigt.


Die vollständigen Mengen seien wie folgt definiert:

Z1 Z2
R1 3 1
R2 4 2
R3 0 3
E1 E2 E3
Z1 2 1 0
Z2 1 3 2

Aus diesen Tabellen ergibt sich die **Gozintomatrix Rohstoffe → Endprodukte**, indem die Matrizen miteinander multipliziert werden:

[math]\displaystyle{ RZ = \begin{pmatrix} 3 & 1 \\ 4 & 2 \\ 0 & 3 \end{pmatrix}, \qquad ZE = \begin{pmatrix} 2 & 1 & 0 \\ 1 & 3 & 2 \end{pmatrix} }[/math]
[math]\displaystyle{ RE = RZ \cdot ZE = \begin{pmatrix} 3 & 1 \\ 4 & 2 \\ 0 & 3 \end{pmatrix} \cdot \begin{pmatrix} 2 & 1 & 0 \\ 1 & 3 & 2 \end{pmatrix} }[/math]

Berechnung:

[math]\displaystyle{ RE = \begin{pmatrix} 3\cdot2 + 1\cdot1 & 3\cdot1 + 1\cdot3 & 3\cdot0 + 1\cdot2 \\ 4\cdot2 + 2\cdot1 & 4\cdot1 + 2\cdot3 & 4\cdot0 + 2\cdot2 \\ 0\cdot2 + 3\cdot1 & 0\cdot1 + 3\cdot3 & 0\cdot0 + 3\cdot2 \end{pmatrix} = \begin{pmatrix} 7 & 6 & 2 \\ 10 & 10 & 4 \\ 3 & 9 & 6 \end{pmatrix} }[/math]

Die Matrix zeigt, wie viele Tonnen der Rohstoffe \(R_1, R_2, R_3\) jeweils zur Herstellung von 1 Tonne der Endprodukte \(E_1, E_2, E_3\) notwendig sind. Beispielsweise bedeutet die erste Spalte:

Für 1 Tonne \(E_1\) werden benötigt:

  • 7 Tonnen \(R_1\)
  • 10 Tonnen \(R_2\)
  • 3 Tonnen \(R_3\)

Dies ergibt sich daraus, dass die Zwischenprodukte Z1 und Z2 selbst wiederum aus Rohstoffen bestehen.

Abgerufen von „https://wiki.flbk-hamm.de/index.php?title=Gozintograph&oldid=2419“