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标签 ，在第二章我们有介绍。
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();}
写完数据数字展示之后我们可以在柱形展示后加上文字展示的函数，这样随着柱形更新，文字就顺便更新了。
全部代码整合到一起之后，我们就实现了冒泡排序的可视化，这一个小应用 只是我们学习中的一个小知识，从中要学习方法而不是记住代码。
第三章理论的模板的应用，即我们同时考虑同时出现的情况
可视化不是把图形跟文字混到一起在可视化，而是有一个先后的顺序，即：处理内容先后分开 按照步骤来进行合理的处理，思路清晰又不容易让我们搞混
写作一个东西需要先思考我们需要做什么，思而后动让我们处于主动。
下面让我们看一下我们代码结果的演示：
尾言
千里之堤，溃于蚁穴
抓住问题的小关键能让我们更好的理清自己的需求。