Auf Thema antworten

Beitrag

[QUOTE="GeoTeach, post: 14526, member: 4989"]
[USER=3917]@Sempervivum[/USER]: Yeah, genau diesen Hinweis habe ich gebraucht! Jetzt klappts! Es hat zwar noch Schönheitsfehler, aber ich find's ziemlich brauchbar. Vielen Dank dafür!
Es ist tatsächlich möglich ausschliesslich im Javasript. Hier noch die Funktion drawRelations():
[CODE=javascript]            function drawRelations() {
                const svg = document.getElementById('visualisierung').querySelector('svg');

relations.forEach((relation, index) => {
                    const sourceElement = elements.find(el => el.beschreibung === relation.quelle.beschreibung);
                    const targetElement = elements.find(el => el.beschreibung === relation.ziel.beschreibung);

if (!sourceElement || !targetElement) return;

const sourceIndex = elements.indexOf(sourceElement);
                    const targetIndex = elements.indexOf(targetElement);
                    const sourceAngle = sourceIndex * angleIncrement - Math.PI / 2;
                    const targetAngle = targetIndex * angleIncrement - Math.PI / 2;

const sourceX = centerX + polygonRadius * Math.cos(sourceAngle);
                    const sourceY = centerY + polygonRadius * Math.sin(sourceAngle);
                    const targetX = centerX + polygonRadius * Math.cos(targetAngle);
                    const targetY = centerY + polygonRadius * Math.sin(targetAngle);

const midX = (sourceX + targetX) / 2;
                    const midY = (sourceY + targetY) / 2;

const angleRadians = Math.atan2(targetY - sourceY, targetX - sourceX);
                    const angleDegrees = angleRadians * (180 / Math.PI);

const distance = Math.sqrt((targetX - sourceX) ** 2 + (targetY - sourceY) ** 2);
                    const rectWidth = distance - elementRadius * 2; 
                    const rectHeight = elementRadius * 0.6;
                    const rectX = midX - rectWidth / 2;
                    const rectY = midY - rectHeight / 2;

const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
                    group.setAttribute('transform', `rotate(${angleDegrees}, ${midX}, ${midY})`);

const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
                    rect.setAttribute('x', rectX);
                    rect.setAttribute('y', rectY);
                    rect.setAttribute('width', rectWidth);
                    rect.setAttribute('height', rectHeight);
                    rect.setAttribute('fill', 'white');
                    rect.setAttribute('stroke', 'black');

group.appendChild(rect);
                    group.appendChild(text);

svg.appendChild(group);
                });
            }[/CODE]
[/QUOTE]

Authentifizierung