Rxjs入门实践-各种排序算法排序过程的可视化展示
Rxjs入门实践-各种排序算法排序过程的可视化展示
这几天学习下《算法》的排序章节,具体见对排序的总结,想着做点东西,能将各种排序算法的排序过程使用Rxjs通过可视化的方式展示出来,正好练系一下Rxjs的使用
本文不会太多介绍Rxjs的基本概念,重点介绍如何用响应式编程的思想来实现功能
效果图
需求
页面中包括一个随机生成300个数字的按钮和、一个选择不同排序算法的下拉列表和一个echart渲染的容器元素
点击按钮会随机生成300个随机数,同时页面渲染出300个数的柱状图,然后选择一种排序算法后,页面开始展示排序过程,在排序过程中如果我们切换成另一种排序算法,会停止当前算法的可视化展示,转而开始新的排序算法的可视化展示
思路
要展示出排序算法在排序过程中数组中数据的变化,我们要定期保存一下排序过程中当前数组的快照
,然后通过echart展示当前数组的数据,重复这个过程直到排序完成,我们也就有了表示排序过程的一个动画展示
具体实现
在Rxjs中,一切皆是流,要实现这个功能,重要的是确定好数据流,以及数据流在未来一段时间内的变化过程
根据页面,可以清晰的确定几个数据流
按钮点击操作生成的数据流
const createNumber$ = Rx.Observable.fromEvent(query('.numberCreator'), 'click')
切换下拉列表生成的数据流
const select$ = Rx.Observable.fromEvent(query('.sortTypes'), 'change')
点击按钮生成随机数组并渲染echart图表很显然就用到map和do这两个operator
createNumber$
.map(e => {
return numberCreator()
})
.do(nums => {
const option = getOption(nums)
echartInstance.setOption(option)
})
切换下拉列表时我们要得到当前选择的排序算法的一个标识
let currentType
select$
.map(e => e.target)
.map(x => x.options[x.selectedIndex].value)
.map(type => {
return {
type,
timer:1
}
})
.do(x => {
currentType = x.type
})
下面是重点
只点击按钮或者只切换下拉页面都不应该展示排序过程,只有当两个事件流都触发了,并且之后某一个再次触发的时候才会渲染排序过程的动画,所以我们需要combineLatest
操作符,将两个数据流合并成一个
const combine$=Rx.Observable.combineLatest(
createNumber$,
select$
)
现在在combine$数据流中我们就有个随机数组和排序类型
[Array[300],'1']
然后就应该排序算法进行工作了,这里思考一下
- [] 怎样来生成我们排序算法排序过程中数据的快照?
- [] 生成的数据快照什么时候让echart来渲染?
对于第一点,我们需要将排序算法封装成一个自定义的operator
,在排序过程中不断next() 数据快照,
到这里我们的数据流就变成能在未来一段时间内不断生成新Value的一个数据流
Rx.Observable.prototype.sort = function () {
const input = this
return Rx.Observable.create((observer) => {
input.subscribe((arr) => {
const nums = clone(arr[0])
const select = arr[1]
const sortMethod = sortTypes[select.type]
sortMethod(nums, function (arr) {
observer.next({
nums: JSON.parse(JSON.stringify(arr)),
select
})
}, error => {
observer.error(error)
})
}, )
})
}
combine$.sort()
对于第二点,因为排序算法是非常快的,如果我们subscibe sort()操作符产生的新值就开始渲染echart,页面上是看不出动画效果的,所以,我们需要延迟echart渲染图表的过程
,我们需要将sort()触发的值转变成一个异步的新事件流并打平到原数据流中
combine$
.sort()
.flatMap(obj => {
return Rx.Observable.of(obj).delay(100 * obj.select.timer++)
})
注意obj.select.timer++
,对于sort()前后触发的两个值,为了展示出echart渲染的动画,我们要给它们渲染的时间依次递增
到这一步,我们的单次功能就能正常进行了,但如果在一个排序动画过程还没有结束,我们又点击了一个新的排序类型
,则新旧两次的还在序列
中没进行的渲染都会依次进行,干扰echart渲染的效果,所以在切换到新的类型时,我们要过滤序列中的值。
combine$
.sort()
.flatMap(obj => {
return Rx.Observable.of(obj).delay(100 * obj.select.timer++)
})
.filter(x => {
return x.select.type == currentType
})
.do(x => {
const option = getOption(x.nums)
echartInstance.setOption(option)
})
.subscribe(() => { }, null, () => {
console.log('complete')
})
整个数据流序列
-createNumber$---------------------------------------------------------------------------------
---------------select$-------------------------------------------------------------------------
combineLatest()
---------------------------combine$------------------------------------------------------------
sort()
---------------------------v1 v2 v3 v4 .......v11 v22 v33----------
flatMap()
---------------------------delay1 delay2 delay3 delay4 ....delay11 delay22 delay33--------
filter(currentType==type)
---------------------------delay1 delay2 delay11 delay22 delay33--------------------------
Rxjs入门实践-各种排序算法排序过程的可视化展示的更多相关文章
- Python的函数式编程-传入函数、排序算法、函数作为返回值、匿名函数、偏函数、装饰器
函数是Python内建支持的一种封装,我们通过把大段代码拆成函数,通过一层一层的函数调用,就可以把复杂任务分解成简单的任务,这种分解可以称之为面向过程的程序设计.函数就是面向过程的程序设计的基本单元. ...
- javascript数据结构与算法--基本排序算法(冒泡、选择、排序)及效率比较
javascript数据结构与算法--基本排序算法(冒泡.选择.排序)及效率比较 一.数组测试平台. javascript数据结构与算法--基本排序(封装基本数组的操作),封装常规数组操作的函数,比如 ...
- 易普优APS混流排序算法助力汽车整车厂的均衡生产
一.汽车整车厂生产排序的难点 “ 冲压-焊接-涂装-总装”是汽车整车生产的四大工艺类型,它们存在上下游关联关系,每个车间都有自己的优化排序目标,汽车混流生产模式使得生产过程更加复杂,从而生产管控的难度 ...
- python 经典排序算法
python 经典排序算法 排序算法可以分为内部排序和外部排序,内部排序是数据记录在内存中进行排序,而外部排序是因排序的数据很大,一次不能容纳全部的排序记录,在排序过程中需要访问外存.常见的内部排序算 ...
- 基于Qt5的排序算法简单可视化
之前写了几个排序算法,然后看到别人将排序算法的过程可视化出来,所以就想尝试一下,然后就用Qt简单写了个界面,用QImage和QPainter来画图显示,代码比较简单. 我的想法是画图的时候,图像的X轴 ...
- 11.经典O(n²)比较型排序算法
关注公号「码哥字节」修炼技术内功心法,完整代码可跳转 GitHub:https://github.com/UniqueDong/algorithms.git 摘要:排序算法提多了,很多甚至连名字你都没 ...
- Python实现一些常用排序算法
一些常用的排序 #系统内置排序算法#list.sort()#heapq模块 def sys_heap_sort(list): import heapq heap = [] for i in range ...
- C++进阶 STL(3) 第三天 函数对象适配器、常用遍历算法、常用排序算法、常用算数生成算法、常用集合算法、 distance_逆序遍历_修改容器元素
01昨天课程回顾 02函数对象适配器 函数适配器是用来让一个函数对象表现出另外一种类型的函数对象的特征.因为,许多情况下,我们所持有的函数对象或普通函数的参数个数或是返回值类型并不是我们想要的,这时候 ...
- 【高级排序算法】2、归并排序法的实现-Merge Sort
简单记录 - bobo老师的玩转算法系列–玩转算法 -高级排序算法 Merge Sort 归并排序 Java实现归并排序 SortTestHelper 排序测试辅助类 package algo; im ...
随机推荐
- certutil
计算摘要 certutil -hashfile inst.ini MD2 certutil -hashfile inst.ini MD5 certutil -hashfile inst.ini SHA ...
- DjangoBlog部署教程
本篇文章将会手把手教你如何部署DjangoBlog项目,首先介绍下我这里的基本环境,请大家仔细阅读此部分,下面的教程都会使用这些约定来介绍: 系统是ubuntu 18.04 LTS 假设你的域名是ww ...
- SSH免密码登陆详解
为了更好的理解SSH免密码登陆原理,我们先来说说SSH的安全验证,SSH采用的是”非对称密钥系统”,即耳熟能详的公钥私钥加密系统,其安全验证又分为两种级别. 1. 基于口令的安全验证 这种方式使用用户 ...
- 74)PHP,Session的一些属性
(1) (2)有效期在 会话周期结束(就是将浏览器关闭前) (3)有效路径: 整站都有效 (4)有效域:当前域 (5)是否安全传输:否 (6)以上的session数据的特征都是由一个问题导致的,就 ...
- 吴裕雄--天生自然python学习笔记:python OpenCV 基本绘图
Open CV 提供了绘制直线.圆形.矩形等基本绘 图的功能 . Open CV 画直线的语法为: 在画布上添加文字的语法为 : 用 Open CV 绘制基本图形 以 OpenCV 基本绘图绘制各种图 ...
- 吴裕雄--天生自然python学习笔记:python下载安装各种模块的whl文件网址
python下载安装各种模块的whl文件网址:https://www.lfd.uci.edu/~gohlke/pythonlibs/#lxml
- Qt 项目中main主函数及其作用
main.cpp 是实现 main() 函数的文件,下面是 main.cpp 文件的内容. #include "widget.h" #include <QApplicatio ...
- MOOC(7)- case依赖、读取json配置文件进行多个接口请求-发送测试报告邮件(19)
给多个人发邮件时,可以传入邮箱列表 把多个收件人用分号隔开 # -*- coding: utf-8 -*-# @Time : 2020/2/15 17:02# @File : send_mail_19 ...
- win10安装motionbuilder失败,怎么强力卸载删除注册表并重新安装
一些搞设计的朋友在win10系统下安装motionbuilder失败或提示已安装,也有时候想重新安装motionbuilder的时候会出现本电脑windows系统已安装motionbuilder,你要 ...
- 通过银行卡的Bin号来获取银行名称
/** * 通过银行的Bin号 来获取 银行名称 * @author 一介草民 * */ public class BankUtil { public static void main(String[ ...