Spaces:
Running
Running
File size: 2,496 Bytes
8e3cd77 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
document.addEventListener('DOMContentLoaded', function() {
const svg = document.getElementById('graph');
const scale = 100; // 1 unit = 100px (1 inch gap)
// Define the points (convert 1 unit = 100px)
const points = [
{x: 0, y: 0, label: 'A'},
{x: 4, y: 4, label: 'B'},
{x: 0, y: 4, label: 'C'},
{x: 4, y: 0, label: 'D'},
{x: 0, y: 2, label: 'E'},
{x: 2, y: 0, label: 'F'},
{x: 4, y: 2, label: 'G'},
{x: 2, y: 4, label: 'H'}
];
// Define the connections
const connections = [
[0, 1], // A-B (0,0)-(4,4)
[2, 3], // C-D (0,4)-(4,0)
[4, 5], // E-F (0,2)-(2,0)
[5, 6], // F-G (2,0)-(4,2)
[6, 7], // G-H (4,2)-(2,4)
[7, 4], // H-E (2,4)-(0,2)
[0, 3], // A-D (0,0)-(4,0)
[3, 1], // D-B (4,0)-(4,4)
[1, 2], // B-C (4,4)-(0,4)
[2, 0] // C-A (0,4)-(0,0)
];
// Draw dots
points.forEach(point => {
// Create circle
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', point.x * scale);
circle.setAttribute('cy', point.y * scale);
circle.setAttribute('r', 8);
circle.setAttribute('class', 'dot');
svg.appendChild(circle);
// Create label
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', point.x * scale);
text.setAttribute('y', point.y * scale);
text.setAttribute('dy', '1.5em');
text.setAttribute('class', 'dot-label');
text.textContent = point.label;
svg.appendChild(text);
});
// Draw lines
connections.forEach(conn => {
const [start, end] = conn;
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x1', points[start].x * scale);
line.setAttribute('y1', points[start].y * scale);
line.setAttribute('x2', points[end].x * scale);
line.setAttribute('y2', points[end].y * scale);
line.setAttribute('class', 'line');
svg.appendChild(line);
});
// Animation button
document.getElementById('animateBtn').addEventListener('click', function() {
document.querySelectorAll('.line').forEach(line => {
line.style.strokeDashoffset = '1000';
line.style.animation = 'dash 2s linear forwards';
});
});
});
|