6.1.1 图结构术语交互图�?/title> <link rel="stylesheet" href="../shared/css/common.css"> <style> .type-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; } .type-tabs button { padding:6px 14px; border:1px solid var(--rule); border-radius:20px; background:#fff; cursor:pointer; font-size:0.85rem; } .type-tabs button.active { background:var(--accent); color:#fff; border-color:var(--accent); } #graphCanvas { width:100%; height:420px; border-radius:var(--radius-sm); background:#fafbfc; cursor:pointer; } .term-info { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:10px; margin-top:12px; } .term-card { background:#fff; border:1px solid var(--rule); border-radius:var(--radius-sm); padding:10px 14px; font-size:0.85rem; } .term-card b { color:var(--accent); } @media (max-width:768px){ #graphCanvas{ height:300px; } } </style> </head> <body> <nav class="top-nav"> <div class="container top-nav-inner"> <a href="../index.html" class="site-title">数据结构课程</a> <div class="nav-links"> <a href="../index.html">首页</a> <a href="../ch1/h5-1-1.html">�?�?/a> <a href="../ch2/h5-2-1.html">�?�?/a> <a href="../ch3/h5-3-1.html">�?�?/a> <a href="#">�?�?/a> <a href="#">�?�?/a> <a href="h5-6-1.html" class="active">�?�?/a> <a href="#">�?�?/a> <a href="#">�?�?/a> </div> </div> </nav> <div class="chapter-nav"> <div class="container chapter-nav-inner"> <a href="h5-6-1.html" class="active">6.1.1 术语图鉴</a> <a href="h5-6-2a.html">6.2.1 邻接矩阵</a> <a href="h5-6-2b.html">6.2.2 邻接�?/a> <a href="h5-6-2c.html">6.2.3 存储对比</a> <a href="h5-6-3a.html">6.3.1 DFS</a> <a href="h5-6-3b.html">6.3.2 BFS</a> <a href="h5-6-3c.html">6.3.3 DFS vs BFS</a> <a href="h5-6-4a.html">6.4.1 Prim</a> <a href="h5-6-4b.html">6.4.2 Kruskal</a> <a href="h5-6-4c.html">6.4.3 对比</a> <a href="h5-6-5a.html">6.5.1 Dijkstra</a> <a href="h5-6-5b.html">6.5.2 Floyd</a> <a href="h5-6-5c.html">6.5.3 对比</a> <a href="h5-6-6a.html">6.6.1 拓扑排序</a> <a href="h5-6-6b.html">6.6.2 关键路径</a> <a href="h5-6-6c.html">6.6.3 进度模拟</a> <a href="h5-6-7a.html">6.7.1 Tarjan</a> <a href="h5-6-7b.html">6.7.2 二部�?/a> </div> </div> <header class="page-header"> <div class="container"> <h1>6.1.1 图结构术语交互图�?/h1> <p class="subtitle">点击顶点查看�?入度/出度，切换图类型观察不同结构</p> </div> </header> <main class="page-content"> <div class="container"> <div class="control-panel"> <div class="ctrl-group"> <button class="btn btn-primary btn-play" id="btnPlay">�?播放</button> <button class="btn btn-secondary btn-pause" id="btnPause">�?暂停</button> <button class="btn btn-secondary btn-step" id="btnStep">�?单步</button> <button class="btn btn-secondary btn-back" id="btnBack">�?后退</button> <button class="btn btn-danger btn-reset" id="btnReset">�?重置</button> </div> <div class="ctrl-group"> <label>速度: <input type="range" class="speed-slider" id="speedSlider" min="100" max="1000" value="500"></label> </div> </div> <div class="status-bar" id="statusBar">选择图类型并点击顶点查看术语信息</div> <div class="type-tabs" id="typeTabs"> <button class="active" data-type="undirected">无向�?/button> <button data-type="directed">有向�?/button> <button data-type="weighted">带权�?/button> <button data-type="complete">完全�?/button> <button data-type="bipartite">二部�?/button> </div> <div class="viz-container"> <canvas id="graphCanvas"></canvas> </div> <div class="term-info" id="termInfo"> <div class="term-card"><b>顶点�?V:</b> <span id="infoV">-</span></div> <div class="term-card"><b>边数 E:</b> <span id="infoE">-</span></div> <div class="term-card"><b>选中顶点:</b> <span id="infoSel">-</span></div> <div class="term-card"><b>�?入度/出度:</b> <span id="infoDeg">-</span></div> <div class="term-card"><b>图类�?</b> <span id="infoType">-</span></div> <div class="term-card"><b>密度:</b> <span id="infoDense">-</span></div> </div> </div> </main> <script src="../shared/js/common.js"></script> <script> (function(){ 'use strict'; const canvas = document.getElementById('graphCanvas'); const ctx = canvas.getContext('2d'); const statusBar = document.getElementById('statusBar'); let width, height, dpr; let graphType = 'undirected'; let nodes = [], edges = []; let selectedNode = null; let animController; const presets = { undirected: { nodes: [{id:0,label:'A'},{id:1,label:'B'},{id:2,label:'C'},{id:3,label:'D'},{id:4,label:'E'}], edges: [[0,1],[1,2],[2,3],[3,4],[4,0],[0,2]], directed: false, weighted: false }, directed: { nodes: [{id:0,label:'A'},{id:1,label:'B'},{id:2,label:'C'},{id:3,label:'D'},{id:4,label:'E'}], edges: [[0,1],[1,2],[2,3],[3,4],[4,0],[0,2]], directed: true, weighted: false }, weighted: { nodes: [{id:0,label:'A'},{id:1,label:'B'},{id:2,label:'C'},{id:3,label:'D'},{id:4,label:'E'}], edges: [[0,1,4],[1,2,2],[2,3,5],[3,4,1],[4,0,3],[0,2,7]], directed: false, weighted: true }, complete: { nodes: [{id:0,label:'A'},{id:1,label:'B'},{id:2,label:'C'},{id:3,label:'D'},{id:4,label:'E'}], edges: [[0,1],[0,2],[0,3],[0,4],[1,2],[1,3],[1,4],[2,3],[2,4],[3,4]], directed: false, weighted: false }, bipartite: { nodes: [{id:0,label:'A'},{id:1,label:'B'},{id:2,label:'C'},{id:3,label:'1'},{id:4,label:'2'},{id:5,label:'3'}], edges: [[0,3],[0,4],[1,4],[1,5],[2,3],[2,5]], directed: false, weighted: false } }; function resize(){ const rect = canvas.parentElement.getBoundingClientRect(); width = rect.width - 40; height = window.innerWidth <= 768 ? 300 : 420; dpr = window.devicePixelRatio || 1; canvas.width = width * dpr; canvas.height = height * dpr; canvas.style.width = width + 'px'; canvas.style.height = height + 'px'; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); layoutNodes(); draw(); } function loadPreset(type){ const p = presets[type]; nodes = p.nodes.map((n,i)=>{ const angle = (i / p.nodes.length) * Math.PI * 2 - Math.PI/2; return {...n, x:0, y:0, r:22, px:0, py:0, angle}; }); edges = p.edges.map(e=>({u:e[0], v:e[1], w:e[2]||1})); graphType = type; selectedNode = null; layoutNodes(); updateInfo(); draw(); } function layoutNodes(){ const cx = width/2, cy = height/2, radius = Math.min(width, height)*0.35; nodes.forEach(n=>{ n.px = cx + Math.cos(n.angle)*radius; n.py = cy + Math.sin(n.angle)*radius; }); } function draw(){ ctx.clearRect(0,0,width,height); const p = presets[graphType]; // edges edges.forEach(e=>{ const a = nodes[e.u], b = nodes[e.v]; if(!a||!b) return; ctx.beginPath(); if(p.directed){ const dx = b.px - a.px, dy = b.py - a.py, dist = Math.hypot(dx,dy); const nx = dx/dist, ny = dy/dist; const startX = a.px + nx*a.r, startY = a.py + ny*a.r; const endX = b.px - nx*b.r, endY = b.py - ny*b.r; CanvasUtils.drawArrow(ctx, startX, startY, endX, endY, {color:'#adb5bd', width:2}); } else { ctx.moveTo(a.px, a.py); ctx.lineTo(b.px, b.py); ctx.strokeStyle = '#adb5bd'; ctx.lineWidth = 2; ctx.stroke(); } if(p.weighted){ const mx = (a.px + b.px)/2, my = (a.py + b.py)/2; ctx.fillStyle = '#e63946'; ctx.font = 'bold 12px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(String(e.w), mx, my-8); } }); // nodes nodes.forEach(n=>{ ctx.save(); if(n===selectedNode){ ctx.shadowColor='var(--accent)'; ctx.shadowBlur=16; } ctx.beginPath(); ctx.arc(n.px, n.py, n.r, 0, Math.PI*2); ctx.fillStyle = n===selectedNode ? '#4361ee' : '#2a9d8f'; ctx.fill(); ctx.strokeStyle='#fff'; ctx.lineWidth=3; ctx.stroke(); ctx.fillStyle='#fff'; ctx.font='bold 14px sans-serif'; ctx.textAlign='center'; ctx.textBaseline='middle'; ctx.fillText(n.label, n.px, n.py); ctx.restore(); }); } function updateInfo(){ const p = presets[graphType]; document.getElementById('infoV').textContent = nodes.length; document.getElementById('infoE').textContent = edges.length; document.getElementById('infoType').textContent = {undirected:'无向�?,directed:'有向�?,weighted:'带权无向�?,complete:'完全无向�?,bipartite:'二部�?}[graphType]; const maxE = p.directed ? nodes.length*(nodes.length-1) : nodes.length*(nodes.length-1)/2; document.getElementById('infoDense').textContent = maxE ? (edges.length/maxE).toFixed(2) : '-'; if(selectedNode){ document.getElementById('infoSel').textContent = selectedNode.label; let deg = 0, indeg = 0, outdeg = 0; edges.forEach(e=>{ if(e.u===selectedNode.id||e.v===selectedNode.id) deg++; if(p.directed){ if(e.u===selectedNode.id) outdeg++; if(e.v===selectedNode.id) indeg++; } }); document.getElementById('infoDeg').textContent = p.directed ? `入度${indeg} / 出度${outdeg}` : `�?${deg}`; } else { document.getElementById('infoSel').textContent = '-'; document.getElementById('infoDeg').textContent = '-'; } } function getMousePos(e){ const rect=canvas.getBoundingClientRect(); return {x:e.clientX-rect.left, y:e.clientY-rect.top}; } canvas.addEventListener('click', e=>{ const pos=getMousePos(e); let found=null; for(const n of nodes){ const dx=pos.x-n.px, dy=pos.y-n.py; if(dx*dx+dy*dy<=n.r*n.r){found=n;break;} } selectedNode = found; if(found) statusBar.textContent = `选中顶点 ${found.label}，查看右侧术语信息`; updateInfo(); draw(); }); document.querySelectorAll('#typeTabs button').forEach(btn=>{ btn.addEventListener('click', ()=>{ document.querySelectorAll('#typeTabs button').forEach(b=>b.classList.remove('active')); btn.classList.add('active'); loadPreset(btn.dataset.type); statusBar.textContent = `切换�?{btn.textContent}`; }); }); animController = new AnimationController({ speed:500, onStep:(idx)=>{ statusBar.textContent = `动画步骤 ${idx+1}`; }, onComplete:()=>{ statusBar.textContent = '动画完成'; }, onReset:()=>{ statusBar.textContent = '已重�?; selectedNode=null; updateInfo(); draw(); } }); animController.setSteps([0,1,2,3,4]); DOMUtils.bindControls(animController, '.control-panel'); window.addEventListener('resize', resize); loadPreset('undirected'); resize(); })(); </script> </body> </html>