D3学习指北--第三章应用,冒泡排序的可视化

Posted 流星蝴蝶没有剑

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了D3学习指北--第三章应用,冒泡排序的可视化相关的知识,希望对你有一定的参考价值。

前言

本章前面已经讲了D3选择操作,以及选择后返回的选择集的操作。那么我们应用一下,利用 d3.js写一个冒泡排序的可视化。


首先第一步:分析需求

一个冒泡排序算法(这个是算法设计问题,本章我将不讨论,直接给出)
一个数据柱形图展示(这是本章应用的关键,我将一步一步讲解)

var showconf = {"left":50,"top":50,"bom":50,"right":50,"width":50};

第二部:需求技术分析:

冒泡排序算法:
var dataset =[9,8,7,6,5,4,3,2,1];for (var i = 0; i < dataset.length; i++) { //因为js没有sleep函数,所以自写的休眠函数 function sleep(time){ return new Promise((resolve) => setTimeout(resolve, time)); }  for (var k = i; k < dataset.length; k++) { if (dataset[i] > dataset[k]) { var t = dataset[i]; dataset[i] = dataset[k]; dataset[k] = t; //数据每排序一次,就进行一次柱状图显示,达到排序可视化 await sleep(500);//休眠5秒展示可视化 } }}

柱形图展示步骤:

第一步:在body内写一个svg并在js代码内固定他的内边框padding值与柱形的宽
第二部:获取数据绑定后的三种情况selection,enter,sxit
第三步:针对selection情况我们跟更新一下它的属性,
    enter情况我们添加一个rect元素,并给它添加属性
    exit情况我们删除元素--虽然我们排序不会出现这个情况

function rectshow() { //获取数据绑定后的三种情况 var selection = d3.select("svg").selectAll("rect").data(dataset); var enter = selection.enter(); var exit = selection.exit(); //绑定上数据的元素处理方法 selection.attr("x",function (d,i) { return i*50+showconf["left"]; }).attr("y",function (d,i) { return 200-d*10-showconf["bom"]; }).attr("width",30) .attr("height",function (d,i) { return d*10; }).attr("fill","blue"); //比元素多的数据处理方法 enter.append("rect") .attr("x",function (d,i) { return i*50+showconf["left"]; }).attr("y",function (d,i) { return 200-d*10-showconf["bom"]; }).attr("width",30) .attr("height",function (d,i) { return d*10; }).attr("fill","red"); //比数据多的元素 exit.remove();}
为了让我们的数据更容易观察,我们在柱形上面显示数字,用到svg内标签的text标签 ,在第二章我们有介绍。

方法跟柱形展示一样,不过我们添加一个text元素
function textshow() { //获取数据绑定后的三种情况 var selection = d3.select("svg").selectAll("text").data(dataset); var enter = selection.enter(); var exit = selection.exit(); //绑定上数据的元素处理方法 selection.attr("x",function (d,i) { return i*50+showconf["left"]; }).attr("y",function (d,i) { return 200-d*10-showconf["bom"]; }).attr("font-size","14px") .attr("text-anchor","middle") .attr("width","30px") .attr("dx",15) .text(function (d) { return d; }); //比元素多的数据处理方法 enter.append("text") .attr("x",function (d,i) { return i*50+showconf["left"]; }).attr("y",function (d,i) { return 200-d*10-showconf["bom"]; }).attr("font-size","14px") .attr("text-anchor","middle") .attr("width","30px") .attr("dx",15) .text(function (d) { return d; }); exit.remove();}

写完数据数字展示之后我们可以在柱形展示后加上文字展示的函数,这样随着柱形更新,文字就顺便更新了。

  全部代码整合到一起之后,我们就实现了冒泡排序的可视化,这一个小应用 只是我们学习中的一个小知识,从中要学习方法而不是记住代码。






  • 第三章理论的模板的应用,即我们同时考虑同时出现的情况


  • 可视化不是把图形跟文字混到一起在可视化,而是有一个先后的顺序,即:处理内容先后分开 按照步骤来进行合理的处理,思路清晰又不容易让我们搞混

  • 写作一个东西需要先思考我们需要做什么,思而后动让我们处于主动。





下面让我们看一下我们代码结果的演示:

尾言

千里之堤,溃于蚁穴

抓住问题的小关键能让我们更好的理清自己的需求。


以上是关于D3学习指北--第三章应用,冒泡排序的可视化的主要内容,如果未能解决你的问题,请参考以下文章

算法漫游指北(第七篇):冒泡排序冒泡排序算法描述动图演示代码实现过程分析时间复杂度和选择排序算法描述动图演示代码实现过程分析时间复杂度

算法漫游指北(第七篇):冒泡排序冒泡排序算法描述动图演示代码实现过程分析时间复杂度和选择排序算法描述动图演示代码实现过程分析时间复杂度

使用 d3.js 进行日期排序

JavaScript算法(冒泡排序选择排序与插入排序)

学习数据结构笔记====>不同的排序算法(Sort Algorithm)[冒泡,选择,插入,快速,希尔,基数,归并]

冒泡排序可视化