数据结构-基于邻接表实现图的遍历可视化及使用Floyd、Dijkstra算法求解最短路径（JavaScript实现）

最新推荐文章于 2021-12-31 15:51:40 发布

Alan_147

最新推荐文章于 2021-12-31 15:51:40 发布

阅读量2.2k

点赞数 4

分类专栏：数据结构前端文章标签：前端 SVG Floyd Dijkstra 图的深度和广度优先遍历

本文链接：https://blog.csdn.net/Alan_1550587588/article/details/80449222

版权

使用 JavaScript 基于邻接表实现了图的深度、广度遍历，以及 Floyd、Dijkstra 算法求解最短路径。

另外使用 SVG 实现图的遍历可视化。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图论</title>
	<style type="text/css">
   		.container{
   			width: 600px;
   			height: 800px;
   			margin: 0 auto;
   		}
		.node{
			width: 100px;
			min-height: 100px;
		}
		.circle{
			margin: 0 auto;
			width: 50px;
			height: 50px;
		}
   </style>
</head>
<body>
<div class="container">
	<div class="control">
	选择开始遍历的结点：
		<select id="node">
			<option>v0</option>
		</select>
	选择遍历方式：
		<select id="select">
			<option>深度优先遍历</option>
			<option>广度优先遍历</option>
		</select>
		<input type="button" name="click" value="开始遍历" id="button">
	</div>
	<svg id="svg" width="600" height="600"></svg>
</div>
<script type="text/javascript">
(function(){
//存放图结点的数组
var graphVertex = ["v0","v1","v2","v3","v4","v5","v6"];
//存放图边的数组
var graphAdge = [
	{
		start:"v0",
		end: "v2",
		weight: 2
	},
	{
		start:"v0",
		end: "v5",
		weight: 8
	},
	{
		start:"v3",
		end: "v2",
		weight: 1
	},
	{
		start:"v3",
		end: "v5",
		weight: 3
	},
	{
		start:"v4",
		end: "v1",
		weight: 6
	},
	{
		start:"v5",
		end: "v4",
		weight: 8
	},
	{
		start:"v1",
		end: "v2",
		weight: 8
	},
	{
		start:"v1",
		end: "v6",
		weight: 8
	}
];
//图的构造函数,n:结点数量 ， e: 边的数量
var GraphList = function(graphVertex,graphAdge){
	var vertex = [];//存放图中顶点的数组
	var adjList = [];//存放图中边的邻接矩阵
	var n = graphVertex.length, e = graphAdge.length;
	//初始化邻接表
	var initArr = function(){
		//深拷贝，不改变输入数组
		vertex = JSON.parse(JSON.stringify(graphVertex));
		//顶点和边的数量
		var n = graphVertex.length, e = graphAdge.length;
		//初始化arc数组
		for(let i=0;i<n;i++){
			adjList[i] = {
				"vertex": vertex[i],
				"firstEdge": null
			};
		}
		//console.log(adjList);
		//给arc邻接矩阵填充边的权值
		for(let i=0;i<e;i++){
			var start = graphVertex.indexOf(graphAdge[i].start);
			var end = graphVertex.indexOf(graphAdge[i].end);
			if(start===-1||end===-1){
				throw Error("边数组中有结点不在结点数组中");
				return;
			}
			var s = {
				"node": end,
				"weight": graphAdge[i].weight,
				"next": adjList[start].firstEdge
			}
			adjList[start].firstEdge = s;

			//无向图需要下面这两个，有向图不需要
			var t = {
				"node": start,
				"weight": graphAdge[i].weight,
				"next": adjList[end].firstEdge
			}
			adjList[end].firstEdge = t;
		}
		//console.log(adjList);
	};
	//立即执行函数，初始化
	(function(){
		initArr();
	})();

	//图的深度优先遍历
	var dfsTraverse = function(v){
		//输入检测
		if(vertex.indexOf(v)===-1){
			throw Error("广度优先遍历输入结点不在结点数组中");
			return;
		}
		
		var result = [],visited = [];
		var stack = [];
		stack.push(v);
		result.push(v);
		visited[vertex.indexOf(v)] = true;
		while(stack.length!==0){
			let top = stack.pop();
			if(visited[ver

最低0.47元/天解锁文章

Alan_147

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
数据结构-基于邻接表实现图的遍历可视化及使用Floyd、Dijkstra算法求解最短路径（JavaScript实现）

使用 JavaScript 基于邻接表实现了图的深度、广度遍历，以及 Floyd、Dijkstra 算法求解最短路径。另外使用 SVG 实现图的遍历可视化。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;图论&lt;/title
复制链接

扫一扫