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

本文链接：https://blog.csdn.net/weixin_44595299/article/details/115085992

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();
}