D3学习指北--第四章应用，冒泡排序可视乎的功能增加

D3学习指北–第四章应用，冒泡排序可视乎的功能增加

前言

  本节内容将结合冒泡排序可视化的内容，给他添加以下几种样式：

• 1、横坐标轴与纵标轴。
• 2、柱形图柱形的宽度，借助比例尺，全部添加到坐标轴里。
• 3、为了更直观，将冒泡排序交换的柱形，变成红色。

特别说明：坐标轴的原始区间为坐标轴的刻度，坐标轴的映射区间为坐标轴的长度。

第一步：分析需求

一个x轴，一个y坐标轴。x坐标轴下表为第几个，y坐标轴下表为[0,最大值]。

一个解决柱形图的交换柱形颜色的变换，我采用的方式为交换的索引数放到一个数组，利用过滤器过滤出来然后修改CSS样式

这个章节的应用内容比较少，但是坐标轴的逻辑比较复杂，所以理解逻辑就可以了。

大家可以去学习一下CSS样式的"transform"，因为坐标轴没有定位，所以我们利用CSS样式的来移动它。

另外，本章实验是利用上一章应用的源代码增加内容。

第二步：坐标轴的添加

因为每个元素的数字需要按照Y坐标轴的比例尺求对应的比例尺的值；另外坐标轴的值是倒的，所以画坐标轴要反转比例尺的映射区间。这两个操作导致我们
需要先画柱形图，再反转画比例尺。步骤图如下：

1、声明比例尺

2、根据y比例尺求出柱形图的高

3、根据x比例尺求出柱形对应的宽度

3、反转y比例尺的映射区间

4、画比例尺

坐标轴：

	//声明比例尺
	var Xscale = d3.scale.ordinal()
		.domain(d3.range(dataset.length))
		.rangeRoundBands([0,450],0,0);
	var Yscale = d3.scale.linear()
		.domain([0,10])
		.range([0,200]);
	//根据y比例尺求出柱形的高
	//操作
	//反转y比例尺的映射区间
	Yscale.range([200,0])
	//画比例尺
	var Xaxis = d3.svg.axis().scale(Xscale).orient("bottom");
	d3.select("svg").append("g")
		.attr("class","axis")
		.style("transform","translate("+showconf["left"]+"px,"+(300-showconf["bom"]+"px")+")")
		.call(Xaxis)
	var Yaxis = d3.svg.axis().scale(Yscale).orient("left");
	d3.select("svg").append("g")
		.attr("class","axis")
		.style("transform","translate("+showconf["left"]+"px,"+(showconf["top"]+"px")+")")
		.style("transform","translate("+showconf["left"]+"px,"+(showconf["top"]+"px")+")")
		.call(Yaxis)

这是我们的添加坐标轴的大概框架。另外因为这个代码混乱，本来是不想发这期的代码的，但是跟同学聊过之后，决定先发这个代码，等后天的话，
利用这个代码从新发一期函数式编程。

第三步：交换的的柱形变红

这个实现最简单，理论就是：记录更换的数据索引，画柱形的时候利用过滤器把这索引柱形颜色变红。
这个颜色显示只需要添加到数据更新上就可以–这个自己想一下就可以了。

下面直接上代码：

	.filter(function(d,i){
		for(var each in exdataset){
			
			if(exdataset[each] == i){
				console.log(exdataset);
				return true;
			}
		}
		
	}).attr("fill","red");

尾言

这个写的很不舒服，虽然这个代码实现了，但是整体实现的代码过于混乱，鉴于此，我会在后面一篇修改这个这个代码，出一篇函数式编程的教学。

公众号回复：“坐标轴”获取这个应用代码。

欢迎关注公众号：流星蝴蝶没有剑