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++) {
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);
}
}
}
柱形图展示步骤:
第一步:在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();
}
写完数据数字展示之后我们可以在柱形展示后加上文字展示的函数,这样随着柱形更新,文字就顺便更新了。
全部代码整合到一起之后,我们就实现了冒泡排序的可视化,这一个小应用只是我们学习中的一个小知识,从中要学习方法而不是记住代码。
- 第三章理论的模板的应用,即我们同时考虑呼出现的情况
- 可视化不是把图形跟文字混到一起,而是有一个先后的顺序,即:处理内容先后分开
按照步骤来进行合理的处理,思路清晰又不容易让我们搞混 - 写作一个东西需要先思考我们需要做什么,思而后动让我们处于主动。
下面让我们看一下我们代码结果的演示:
视频在公众号里面有。回复“冒泡”即可获得源代码。
尾言
千里之堤,溃于蚁穴
抓住问题的小关键能让我们更好的理清自己的需求。
欢迎关注微信公众哈:流星蝴蝶没有剑。
每周更新最新的学习博客
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)