JS实现图

最新推荐文章于 2024-08-16 11:39:58 发布
最新推荐文章于 2024-08-16 11:39:58 发布
阅读量517 收藏 1
点赞数
分类专栏： 数据结构与算法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38689395/article/details/106983342
版权

实现队列

function Queue() {
    this.items = []

    Queue.prototype.enqueue = function (ele) {
        this.items.push(ele);
    }

    Queue.prototype.dequeue = function () {
        return this.items.shift();
    }

    Queue.prototype.front = function () {
        return this.items[0];
    }

    Queue.prototype.isEmpty = function () {
        return this.items.length == 0;
    }

    Queue.prototype.size = function () {
        return this.items.length;
    }

    Queue.prototype.toString = function () {
        var resultStr = '';
        for (var i = 0; i < this.items.length; i++) {
            resultStr += this.items[i];
        }
        return resultStr;
    }
}

module.exports = Queue;

实现字典

function Dictionary() {
    this.items = {};

    this.set = function (key, value) {
        return this.items[key] = value;
    }

    this.has = function (key) {
        return this.items.hasOwnProperty(key);
    }

    this.remove = function (keu) {
        if (this.has(key)) {
            delete this.items[key];
            return true;
        }
        return false;
    }

    this.get = function (key) {
        return this.has(key) ? this.items[key] : undefined;
    }

    // 获取所有keys
    this.keys = function () {
        return Object.keys(this.items);
    }

    //获取所有values
    this.values = function () {
        return Object.values(this.items);
    }

    this.size = function () {
        return Object.keys(this.items).length;
    }

    this.clear = function () {
        this.items = {};
    }

    this.getItems = function () {
        return this.items;
    }
}

module.exports = Dictionary;

图

图的遍历

  • 广度优先搜索（Breadth-First Search，BFS）
  • 深度优先搜索（Depth-First Search，DFS）
  • 两个遍历算法，都需要明确指定第一个被访问的顶点

记录状态

白色：表示该顶点还没有被访问

灰色：表示该顶点被访问过，但并未探索过

黑色：表示该顶点被访问过且完全探索过

const Dict = require("./dict")
var print = console.log;

function Graph() {
    // 顶点
    this.vertices = [];
    // 边
    this.edges = new Dict();
    Graph.prototype.addVertex = function (v) {
        this.vertices.push(v);
        this.edges.set(v, []);
    }
    Graph.prototype.addEdge = function (v1, v2) {
        this.edges.get(v1).push(v2);
        this.edges.get(v2).push(v1);
    }
    Graph.prototype.toString = function () {
        var resultStr = "";
        for (var i = 0; i < this.vertices.length; i++) {
            resultStr += this.vertices[i] + "->"
            var vEdges = this.edges.get(this.vertices[i]);
            for (var j = 0; j < vEdges.length; j++) {
                resultStr += vEdges[j] + " ";
            }
            resultStr += "\n";
        }
        return resultStr
    }
}

var g = new Graph();
var myVertices = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];
for (var i = 0; i < myVertices.length; i++) {
    g.addVertex(myVertices[i]);
}

g.addEdge('A', 'B');
g.addEdge('A', 'C');
g.addEdge('A', 'D');
g.addEdge('C', 'D');
g.addEdge('C', 'G');
g.addEdge('D', 'G');
g.addEdge('D', 'H');
g.addEdge('B', 'E');
g.addEdge('B', 'F');
g.addEdge('E', 'I');
print(g.edges);

广度 优先搜索

  • 广度优先算法从指定的第一个顶点开始遍历图，先访问其所有的相邻接点，就像一次访问图的一层
  • 先宽后深的访问顶点

BFS

    // 广度优先搜索（BFS）
    Graph.prototype.bfs = function (initV, handler) {
        // 1.初始化颜色
        var color = this.initializeColor();
        // 2.创建队列
        var queue = new Queue();
        // 3.将顶点加入队列中
        queue.enqueue(initV);
        // 4.循环从队列中取出元素
        while (!queue.isEmpty()) {
            // 4.1.从队列取出一个顶点
            var v = queue.dequeue();
            // 4.2.获取顶点和相连的另外顶点
            var vList = this.edges.get(v);
            // 4.3.将v的颜色设置灰色
            color[v] = 'gray';
            // 4.4.遍历所有的顶点，并且加入到队列中
            for (var i = 0; i < vList.length; i++) {
                var e = vList[i];
                if (color[e] == 'white') {
                    color[e] = 'gray';
                    queue.enqueue(e);
                }
            }
            // 4.5.v已经被探测，并且返回
            handler(v);
            // 4.6.将顶点设置为黑色
            color[v] = 'black';
        }
    //
    }
}
var result = '';
g.bfs(g.vertices[0], function (v) {
    result += v + ' ';
})
print(result) // A B C D E F G H I

深度 优先搜索

  • 深度优先搜索算法会从第一个指定的顶点开始遍历图，沿着路径知道这条路径最后被访问了
  • 接着原路回退并探索一条路径

DFS

    // 深度优先搜索（DFS）
    Graph.prototype.dfs = function (initV, handler) {
        // 1.初始化颜色
        var color = this.initializeColor();
        // 2.从某个顶点开始依次递归访问
        this.dfsVisit(initV, color, handler);
    }
    Graph.prototype.dfsVisit = function (v, color, handler) {
        // 1.将颜色设置为灰色
        color[v] = 'gray';
        // 2.处理v顶点
        handler(v);
        // 3.访问v相连的顶点
        var vList = this.edges.get(v);
        for (var i = 0; i < vList.length; i++) {
            var e = vList[i];
            if (color[e] == 'white') {
                this.dfsVisit(e, color, handler);
            }
        }
        // 4.将v设置为黑色
        color[v] = 'black';
    }
var result = '';
g.dfs(g.vertices[0], function (v) {
    result += v + ' ';
})
print(result); // A B E I F C D G H

总代码

const Dict = require('./dict');
const Queue = require('./queue');
var print = console.log;

function Graph() {
    // 顶点
    this.vertices = [];
    // 边
    this.edges = new Dict();
    Graph.prototype.addVertex = function (v) {
        this.vertices.push(v);
        this.edges.set(v, []);
    }
    Graph.prototype.addEdge = function (v1, v2) {
        this.edges.get(v1).push(v2);
        this.edges.get(v2).push(v1);
    }
    Graph.prototype.toString = function () {
        var resultStr = '';
        for (var i = 0; i < this.vertices.length; i++) {
            resultStr += this.vertices[i] + '->'
            var vEdges = this.edges.get(this.vertices[i]);
            for (var j = 0; j < vEdges.length; j++) {
                resultStr += vEdges[j] + ' ';
            }
            resultStr += '\n';
        }
        return resultStr
    }
    // 初始化状态颜色
    Graph.prototype.initializeColor = function () {
        var colors = [];
        for (var i = 0; i < this.vertices.length; i++) {
            colors[this.vertices[i]] = 'white';
        }
        return colors
    }
    // 广度优先搜索（BFS）
    Graph.prototype.bfs = function (initV, handler) {
        // 1.初始化颜色
        var color = this.initializeColor();
        // 2.创建队列
        var queue = new Queue();
        // 3.将顶点加入队列中
        queue.enqueue(initV);
        // 4.循环从队列中取出元素
        while (!queue.isEmpty()) {
            // 4.1.从队列取出一个顶点
            var v = queue.dequeue();
            // 4.2.获取顶点和相连的另外顶点
            var vList = this.edges.get(v);
            // 4.3.将v的颜色设置灰色
            color[v] = 'gray';
            // 4.4.遍历所有的顶点，并且加入到队列中
            for (var i = 0; i < vList.length; i++) {
                var e = vList[i];
                if (color[e] == 'white') {
                    color[e] = 'gray';
                    queue.enqueue(e);
                }
            }
            // 4.5.v已经被探测，并且返回
            handler(v);
            // 4.6.将顶点设置为黑色
            color[v] = 'black';
        }
    }
    // 深度优先搜索（DFS）
    Graph.prototype.dfs = function (initV, handler) {
        // 1.初始化颜色
        var color = this.initializeColor();
        // 2.从某个顶点开始依次递归访问
        this.dfsVisit(initV, color, handler);
    }
    Graph.prototype.dfsVisit = function (v, color, handler) {
        // 1.将颜色设置为灰色
        color[v] = 'gray';
        // 2.处理v顶点
        handler(v);
        // 3.访问v相连的顶点
        var vList = this.edges.get(v);
        for (var i = 0; i < vList.length; i++) {
            var e = vList[i];
            if (color[e] == 'white') {
                this.dfsVisit(e, color, handler);
            }
        }
        // 4.将v设置为黑色
        color[v] = 'black';
    }
}

var g = new Graph();
var myVertices = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];
for (var i = 0; i < myVertices.length; i++) {
    g.addVertex(myVertices[i]);
}

g.addEdge('A', 'B');
g.addEdge('A', 'C');
g.addEdge('A', 'D');
g.addEdge('C', 'D');
g.addEdge('C', 'G');
g.addEdge('D', 'G');
g.addEdge('D', 'H');
g.addEdge('B', 'E');
g.addEdge('B', 'F');
g.addEdge('E', 'I');
print(g.edges.items);
var result = '';
g.bfs(g.vertices[0], function (v) {
    result += v + ' ';
})
print(result);
var result = '';
g.dfs(g.vertices[0], function (v) {
    result += v + ' ';
})
print(result);

输出：

输出

雪急飞绪
关注
专栏目录
JavaScript实现图结构
Ben_Simons
08-15 802
JavaScript实现图结构 一、图论 1.1.图的简介 什么是图？ 图结构是一种与树结构有些相似的数据结构； 图论是数学的一个分支，并且，在数学中，树是图的一种； 图论以图为研究对象，研究顶点和边组成的图形的数学理论和方法； 主要的研究目的为：事物之间的联系，顶点代表事物，边代表两个事物间的关系； 图的特点： 一组顶点：通常用V（Vertex）表示顶点的集合； 一组边：通常用E（Edge）表示边的集合； 边是顶点和顶点之间的连线； 边可以是有向的，也可以是无向的。比如A-...
Js实现图
xiayngbaidu12345的博客
03-26 2177
Js实现图1.图的表示方式2.图的添加操作3.图的toString方法4.图的遍历 1.图的表示方式 ①邻接矩阵 邻接矩阵让每个节点和一个整数相关联，该整数作为数组的下标。用一个二维数组表示顶点之间的连接。在二维数组中，0表示无连接，1表示有连接。邻接矩阵的问题是如果图是个稀疏图，那么会浪费很多空间去存储大量无意义的0. ②邻接表 邻接表由图中每个顶点以及和顶点相邻的顶点列表组成。邻接表可以用map或者哈希表来表示。如图： 邻接表计算出度：直接看每个顶点后边相关的顶点数。 2.图的添加操作 //添加方法（
JavaScript 图表入门指南（三）
最新发布
龙哥盟
08-16 1366
读到这一章，你就完成了这本书的第一部分。您已经看到了如何用 JavaScript 创建一个特定于图表数据表示的库。学习重用已经实现的代码来开发你自己的库，你已经开始理解这种类型的库是如何构造的，以及各部分执行的功能是什么。特别重要的是对树结构的介绍，我们称之为options，许多库都有。options对象在定义图形组件的所有设置中起着重要的作用，因此也定义了如何表示图表。此外，您还看到了如何通过输入数组在内部管理这类库的数据，jQuery 库所扮演的角色，以及在其上构建数据的原因。
图的JS实现
weixin_34275734的博客
10-12 168
图的定义 图就是由若干个顶点和边连接起来的一种结构。很多东西都可以用图来说明，例如人际关系，或者地图。 其中图还分为有向图和无向图。如下就是有向图 图的数据结构 对于图这种关系，可以通过两种方式来存储。 领接表 将每个顶点与其相邻的顶点存储起来。 邻接矩阵 将顶点间的相邻关系用0和1来表示，0表示不相邻，1表示相邻。 图的实现 如下采用邻...
JavaScript数据结构——图
读心悦
05-29 629
文章目录图的术语图的三种表示创建Graph类 图的术语 图是网络结构的抽模型。是一组由边连接的节点，在二元关系中是使用图结构来表示的。 相邻顶点：通过一条边连接在一起的顶点 图的三种表示 邻接矩阵，每一个节点都和一个整数关联，该整数作为节点的索引。 邻接表，由图中每一个顶点的相邻顶点列表组成 关联矩阵，矩阵的行表示顶点，列表示边 创建Graph类 持续更新中 ...
JS画图各种图
09-22
js 画柱状图、饼状图、折线图 采用该脚本，并引用VML源之后，在网页上即可通过一个简单的函数在指定容器内绘制图形引用接口如下：
使用JS实现图片轮播的实例(前后首尾相接)
10-19
在介绍如何使用JavaScript实现图片轮播功能时，首先需要了解图片轮播的基本原理。轮播通常是将一组图片放置在一个容器内，并通过JavaScript定时更换容器内显示的图片，从而实现连续播放的效果。在实现轮播时，常见的...
js实现图片放大并跟随鼠标移动特效
10-17
总的来说，实现图片跟随鼠标移动并放大的JavaScript特效涉及到JavaScript事件处理、DOM操作以及CSS样式控制。这个特效的实现既提高了用户的交互体验，又展示了JavaScript在网页动态效果方面的强大能力。在实际项目中...
js实现图片放大和拖拽特效.rar
06-23
js实现图片放大和拖拽特效.rar js实现图片放大和拖拽特效.rar js实现图片放大和拖拽特效.rar js实现图片放大和拖拽特效.rar js实现图片放大和拖拽特效.rar js实现图片放大和拖拽特效.rar js实现图片放大和拖拽特效....
原生js实现图片轮播特效
10-23
4. 通过JavaScript实现图片的自动切换以及响应用户操作的切换。 在描述中，“适合用于商品展示，实现最简单的广告轮播效果”提及了图片轮播的应用场景，指出这种技术可以被广泛应用于电商网站或广告平台上。 在...
Js实现图片幻灯切换效果-带缩略图.rar
07-10
这个"Js实现图片幻灯切换效果-带缩略图.rar"压缩包文件提供了一个使用JavaScript实现的图片幻灯片功能，同时带有缩略图和动画效果。这种效果常用于网站的首页展示、产品展示或者新闻滚动等场景，能够使内容更生动，...
【JS】数据结构之图结构
qq_45677671的博客
11-30 1347
图是由顶点和边构成，所以图里面要存储的图形结构信息，无非是存储图的顶点和图的边。顶点可以之间通过数组去存储，那边该通过什么存储呢？欧拉开创了新的学科：图论（数学的一个分支）
数据结构(七) 图JS实现
qq_33811654的博客
07-21 305
数据结构(七) 图 图结构由顶点和边构成，顶点V(Vertex)表示事物，边E(Edge)表示关系, 边可以有向的或无向的 图的特点 顶点 边 相邻顶点：一条边两头的顶点称为相邻顶点 度：一个顶点拥有相邻顶点的数量 路径：顶点V1，V2…Vn顶点构成的序列 无向图：边没有方向的图 有向图：边有方向的图 无权图：边带有权重的图 有权图：边没有权重的图 图的表示方法 邻接矩阵 邻接矩阵可以用一个二维数组表示顶点之间的连接 问题:(稀疏图)当顶点数量多而联系少时，因为二维数组会存储所有点之间的联系，所以
javascript图片
q1054261752的博客
01-21 315
JavaScript数据结构——图（Graph）
瓜冬瓜的博客
07-13 2033
概念和结构 图是由顶点和连接顶点的边构成的，通常将数据元素称为顶点，顶点之间的关系称为边。 图分为两种，一种是有向图，另一种是无向图。 我们这里实现二叉搜索树。 二叉搜索树的操作 二叉搜索树有七种常用操作，分别为 插入节点 insert（value） 查找节点 search（value） 移除节点 remove（value） 遍历节点 traverse（value） 获取最小值 min(...
JavaScript中的图
weixin_44422272的博客
12-12 142
JavaScript中没有图这种数据结构，我们可以使用object和array来实现 图的表示（这里使用邻接表表示） const graph = { 0:[1,2],//表示0可以到达1和2 1:[1,2] } 图的深度优先遍历 访问根节点 依对根节点没有访问过的相邻节点进行深度优先遍历 let visited = new Set()//使用集合来记录访问过的节点 const dfs = (n)=>{ console.log(n)//访问 visited.add(n) graph[n]
js(JavaScript)数据结构之图（Graph）
星辰迷上大海的博客
01-13 785
图（Graph）是一种数学结构，由顶点（Vertices）的集合和边（Edges）的集合组成。在计算机科学中，图被广泛用于建模各种实际问题，例如交通系统、运输系统等。
基于js实现图数据结构
浪头的博客
04-19 450
图的相关概念 图是一组由边连接的节点的集合 任何二元关系都可以用图表示 相邻顶点：由一条边连接在一起的顶点 顶点的度：该顶点的相邻顶点数量 路径：顶点的连续序列，如A B C 简单路径：不包含重复的顶点 如果图中不存在环，则称该图是无环的 如果图中的每两个顶点间都存在路径，则该图是连通的 无向图，图的边没有方向，图的边有方向有向图 如果图中的每两个顶点在双向上都有路径，则该图是强连通的,反之就是稀疏图 加权图与未加权图，也就是路径是否有大小 图的表示方式 图的表示方式有很多种，不存在绝对正确的方式，各有
js 画图形
lemonly007的博客
11-21 1254
js 画图形1for( var i=0;i<10;i++){ for(var r=0;r<10;r++){ document.write(“*”);} document.write("<br/>"); } 2for( var i=1;i<=4;i++){ for(var a=1;a<i;a++) { document.write(" "); }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值