【D3.V3.js系列课程】（二十一）-交互图标之条形图排序切换
日期：2014-05-16 浏览次数：20566 次
【D3.V3.js系列教程】（二十一）--交互图标之条形图排序切换
(3)每点击一次排序方向改变
最后效果：单击任何条排序时，再用鼠标滑过条不会打断排序；第二次单击切换升降排序
删除事件控制颜色变化。使用样式表控制
<style type="text/css">
/*(1)鼠标悬停时变色*/
rect:hover{
fill :red;
}
/*(2)过渡效果*/
rect{
-moz-transiton:all 0.3s;
-o-transiton:all 0.3s;
-webkit-transition:all 0.3s;
transition:all 0.3s
}
</style>
(3)每点击一次排序方向改变
var sortOrders=false;
var sortBars=function(){
sortOrders=!sortOrders;//(3)每点击一次排序方向改变
svg.selectAll("rect")
.sort(function(a,b){
if(sortOrders){
//对数据集升序排序
return d3.ascending(a.value,b.value);//这个地方注意是键值对所以要加上值的引用b.value
}else{
//对数据集降序排序
return d3.descending(a.value,b.value);
}
})
被打乱的排序
反转排序（水润丝滑的效果不得不丢弃）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>testD3-18-update.html</title>
<script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>
<style type="text/css">
/*(1)鼠标悬停时变色*/
rect:hover{
fill :red;
}
/*(2)过渡效果*/
rect{
-moz-transiton:all 0.3s;
-o-transiton:all 0.3s;
-webkit-transition:all 0.3s;
transition:all 0.3s
}
</style>
</head>
<body>
<button>单击更新</button>
<br>
<p id="remove">单击删除</p>
<p id="add">单击添加</p>
<br>
<script type="text/javascript">
//键值对数据集
var dataset = [
{key:0,value:5},
{key:1,value:10},
{key:2,value:13},
{key:3,value:19},
{key:4,value:21},
{key:5,value:25},
{key:6,value:22},
{key:7,value:18},
{key:8,value:15},
{key:9,value:13},
{key:10,value:11},
{key:11,value:12},
{key:12,value:15},
{key:13,value:20},
{key:14,value:18},
{key:15,value:17},
{key:16,value:16},
{key:17,value:18},
{key:18,value:23},
{key:19,value:25}];
//设置SVG的高宽
var w=600;
var h=250;
var barPadding = 1;
//定义序数比例尺
var xScale=d3.scale.ordinal()//序数比例尺
.domain(d3.range(dataset.length))
.rangeRoundBands([0,w],0.05);
// 更新数据引用，包含下面所有关于要使用到d.value的地方
var yScale=d3.scale.linear()//y仍然是线性比例尺
.domain([0,d3.max(dataset,function(d){
return d.value;
})])
.range([0,h]);
// 定义键函数(简洁)，以备数据绑定到元素的时候使用
//把所有.data(dataset)改成.data(dataset,key)
var key=function(d){
return d.key;
};
//值函数
var value=function(d){
return d.value;
};
//条排序函数
var sortOrders=false;
var sortBars=function(){
sortOrders=!sortOrders;//(3)每点击一次排序方向改变
svg.selectAll("rect")
.sort(function(a,b){
if(sortOrders){
//对数据集升序排序
return d3.ascending(a.value,b.value);//这个地方注意是键值对所以要加上值的引用b.value
}else{
//对数据集降序排序
return d3.descending(a.value,b.value);
}
})
.transition()
.duration(1000)
.attr("x",function(d,i){//对排序之后的横坐标重排
return xScale(i);
});
};
//Create SVG element
var svg = d3.select("body")//选中DOM中的目标元素
.append("svg")//为目标元素附加上一个svg子元素
.attr("width", w)//设置这个svg的宽
.attr("height", h);//设置这个svg的高
//为SVG添加条形
svg.selectAll("rect")//选中空元素，表示即将创建这样的元素
.data(dataset,key)//对此后的方法都执行dataset.length遍
.enter()//数据元素值比前面选中的DOM元素多就创建一个新的DOM元素
.append("rect")//取得enter的占位元素，并把rect追加到对应的DOM中
.attr("x", function(d, i) {//设置横坐标，从0开始每次右移元素宽那么长(w / dataset.length)
//return i * (w / dataset.length);
return xScale(i);//这里使用序数比例尺，自己去找刚才划分好的档位
})
.attr("y", function(d) {//设置纵坐标，纵坐标正方向是从上往下的，所以条有
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
