论文总字数：14985字

摘 要

数据的可视化在大数据的时代今天已显得更加重要，现在可视化的观察图数据结构往往能够非常特别直观的观察到一些特性，便于我们的学习和感悟与理解，本课题主要采用HTML5与Javascript实现一个可视化的过程工具，能更加直观地演示各种数据结构与算法，交互式调节算法参数和显示图形与显示参数，通过本课题的研究，对所学数据结构作更进一步研究与实现。

深入学习数据结构和算法，实现stack的数组、链表实现可视化,queue的数组、链表实现可视化,冒泡排序、插入排序、选择排序、快速排序、合并排序、谢尔排序实现可视化,二叉搜索树、AVL树、2-3树、B树实现可视化,hash算法实现可视化,huffman算法实现可视化。写程序，尤其是用JavaScript 写程序时，经常需要权衡，知道了数据结构和算法的优缺点，在解决具体的编程问题时就容易做出正确的选择。

关键词：java；jsp；js; css; 算法

The visualization tool of data structure based on HTML5 and JavaScript

Abstract

Data visualization in the era of big data today has become more important. Now visual observation graph data structure can often very special visual observation to some characteristics, for our learning and perception and understanding, this paper mainly uses the HTML5 and JavaScript to achieve a visual tool, can more intuitive demonstration of various data structures and algorithms, interactive adjustment algorithm parameters and graphic display and the display parameters, through the study of this topic, to learn the data structure for further research and implementation.

Visualization in-depth study data structures and algorithms that achieve stack arrays, linked lists, queue array, linked list visualization, bubble sort, insertion sort, selection sort, quick sort, merge sort, Shell sort visualization, binary search tree, AVL tree, 2-3 tree, B tree visualization, hash algorithm visualization, Huffman algorithm visualization.Write a program, especially program is written in JavaScript, often require tradeoffs, know the advantages and disadvantages of data structures and algorithms, in solving specific programming problem is easy to make the right choice.

Keywords： java；jsp；js; css; Algorithm

目录

第一章 引言 7

1.1课题背景 7

1.2实现可视化的意义 7

1.3 HTML5可视化的发展状况 7

第二章 HTML5、javascript实现数据结构可视化开发技术简介和开发环境 9

2.1软件环境 9

2.1.1 本系统的开发环境： 9

2.2 主要开发技术 9

2.2.1 java语言简介 9

2.3.1 Html5的简介 9

2.3.2 Html5的优点 10

2.4 Js的基本介绍 10

2.4.1 Js的简介 10

2.4.2js的优点 10

第三章 HTML5、javascript实现数据结构可视化的需求分析与设计 11

3.1 HTML5可视化的研究目标 11

3.2 软件模块结构与分析 11

第四章 HTML5、javascript实现数据结构可视化实现流程及说明 12

4.1 冒泡排序算法结构与分析 12

4.2 插入排序法结构与分析 12

4.3 选择排序结构与分析 12

4.4 合并排序结构与分析 12

4.5希尔排序结构与分析 13

4.6 插入结构与分析 13

4.7二叉查找树结构与分析 13

4.8 2-3树结构与分析 14

4.9 哈希算法结构与分析 14

第五章HTML5、javascript实现数据结构可视化的实现 15

5.1 可视化实现介绍 15

5.2 基本结构可视化实现介绍 15

5.3 搜索结构可视化实现介绍 20

5.4 排序算法可视化实现介绍 27

第六章 HTML5、javascript实现数据结构可视化的功能测试 29

6.1 基本结构可视化功能测试 29

6.2 搜索结构可视化功能测试 29

6.3 排序算法可视化功能测试 30

第七章 结束语 31

致谢 32

参考文献 33

第一章 引言

1.1课题背景

在HTML 5发展的JavaScript中，新型图形元素已经显示出了积极的发展趋势、也表明交互式数据显示技术的兴起。所以通过网络，我们在自己的桌面系统中获得几乎无穷无尽的、博客及厂商包括任何拥有网站并提供数据源访问的管理者的多种动态效果与交互式图形，其丰富程度远超我们当初的想象。

数据开创的可视化在数据时代已经显得更加的重要，数据可视化的观察图数据结构往往能非常直观的观察到一些事物特性，便于我们的学习与理解，帮助，本课题采用HTML5 Canvas 和Javascript实现可视化界面，能直观有效演示简单数据结构与算法，交互式调节算法参数和显示参数，经过此次课题的探讨，对于所学数据结构作更加进一步研究与实现

1.2实现可视化的意义

HTML 5具有的特点：1，对于强化了网页的表现性能。,2，对于追加了本地数据库 应用的功能。广义论及HTML5时，实际是包括HTML、CSS和JavaScript在内的一套技术组合所形成的。并且它希望能够减少浏览器对需要的插件丰富网络应用服务。

深入的学习数据结构和算法，不仅我们知道哪种数据结构和算法更高效，还会懂得如何能够快速的找出最适合解决问题的数据结构和算法。在对于写程序，尤其是用JavaScript 写程序，经常需要这种快捷方式，在知道数据结构和算法的优缺点的时候，那我们在解决具体的问题就更加容易的做出正确选择。

剩余内容已隐藏，请支付后下载全文，论文总字数：14985字