jquery 网络图

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。网络图（Network Diagram）通常用于表示网络拓扑结构，显示网络中的设备、节点和它们之间的连接关系。

类型

有向图：边有方向，表示从一个节点到另一个节点的单向连接。
无向图：边没有方向，表示两个节点之间的双向连接。
加权图：边有权重，表示连接的强度或距离。

应用场景

网络拓扑展示：用于展示计算机网络的结构和连接关系。
数据可视化：用于展示复杂的数据关系，如社交网络、交通网络等。
项目管理：用于展示项目任务之间的依赖关系。

示例代码

以下是一个使用 jQuery 和 HTML5 Canvas 绘制简单网络图的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Network Diagram</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="networkCanvas" width="600" height="400"></canvas>
    <script>
        $(document).ready(function() {
            const canvas = document.getElementById('networkCanvas');
            const ctx = canvas.getContext('2d');

            const nodes = [
                { x: 50, y: 50, label: 'Node 1' },
                { x: 200, y: 200, label: 'Node 2' },
                { x: 350, y: 50, label: 'Node 3' }
            ];

            const edges = [
                { from: 0, to: 1 },
                { from: 1, to: 2 },
                { from: 2, to: 0 }
            ];

            // Draw nodes
            nodes.forEach(node => {
                ctx.beginPath();
                ctx.arc(node.x, node.y, 20, 0, 2 * Math.PI);
                ctx.fillStyle = 'blue';
                ctx.fill();
                ctx.fillStyle = 'white';
                ctx.font = '16px Arial';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText(node.label, node.x, node.y);
            });

            // Draw edges
            edges.forEach(edge => {
                const fromNode = nodes[edge.from];
                const toNode = nodes[edge.to];
                ctx.beginPath();
                ctx.moveTo(fromNode.x, fromNode.y);
                ctx.lineTo(toNode.x, toNode.y);
                ctx.strokeStyle = 'black';
                ctx.stroke();
            });
        });
    </script>
</body>
</html>