d3.js学习笔记（四）—–更新后的柱状图（更新、过渡和动画）

d3学习之更新、过渡、动画和序数比例尺

一、序数比例尺

以一定的顺序（从左到右）展示，且均匀分布
序数比例尺的输入值域通常是要指定一个包含类别名的数组，没有明确的类别时，可以给每个数据点或者条形分配一个对应其在数据集中位置的id值
连续生成数值数组的方法：d3.range（）
eg：d3.range（10）生成数组：[0,1,2,3,4,5,6,7,8,9]
.rangeRound([0,w]) 根据输入值域的长度会自动分档，切分成相等的“块”
.paddingInner(0.05) 设置档间距， 0.05即为5%
查找每个条形的宽度：xScale.bandwidth()

二、设置事件监听器

事件类型：mouseover 和 click
通过 d3.select( “标签名”).on(“事件类型”,function(){ …});

三、添加过渡动画

. transition ()
注意：
1、插入位置：插入到选择元素之后，改变任何属性之前

四、持续时间

. duration ()
用来控制动画的持续时间,单位为毫秒
注意：
1、duration 必须放在transition 后面
2、细微界面的反馈，150ms比较合适

五、缓动函数

过渡时间很长，让我们看到了元素缓缓就位，从一个位置换到另一个位置。

1、缓动函数：
.ease(缓动效果)

2、缓动效果：

缓动效果	作用
d3.easeLinear	线性缓动，全程速度一致，没有逐渐加速和逐渐减速的变化
d3.easeCircleIn	逐渐进入并加速，然后突然停止
d3.easeElasticOut	有弹性
d3.easeBounceOut	像皮球一样反复弹跳，慢慢停下来
cubin-in-out	默认缓动效果，逐渐加速再逐渐减速

六、延迟时间

.delay ()
动态延时创造交错延迟的效果：
eg：
.delay(function(d,i){ return i / dataset.length * 1000; } );

步骤：（在基本柱状图的基础上）
1、x轴添加序数比例尺，y轴添加线性比例尺
2、添加事件监听器触发更新数据的事件
3、添加新的数据集，更新所有矩形、文本、颜色、y轴的比例尺（更新了任何大的数据都不会怕溢出）
4、添加过渡动画
5、根据需要添加持续时间、延迟时间、缓动函数等

七、具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>d3 更新后的条形图</title>
    <script type="text/javascript" src="d3.js"></script>
    <style>
        .text{
            font-family:sans-serif;
            font-size:15px;
            text-anchor: middle; 
        }
    </style>
</head>
<body>
    <button >Update datas</button> <!--必须放在script前面--> 
    <script>
        var dataset=[5,10,15,40,22,80,76,20,25,6,28,34,65,24,55,81,34,37,66];
        var w=600;
        var h=300;
        //添加svg
        var svg=d3.select("body")
                    .append("svg")
                    .attr("width",w)
                    .attr("height",h);

        //添加序数比例尺,序数的输入值域是序数，通常是要指定一个包含类别名称的数组
        var xScale=d3.scaleBand()
                        .domain(d3.range(dataset.length))
                        .rangeRound([0,w])
                        .paddingInner(0.05);

        var yScale=d3.scaleLinear()
                        .domain([0,d3.max(dataset,function(d) {return d; })])
                        .range([0,h]);
                      
        //添加矩形，条形图
        svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x",function(d,i){ return xScale(i);})
            .attr("y",function(d){ return h-yScale(d); })    //使条形图由下而上
            .attr("width",xScale.bandwidth())
            .attr("height",function(d){return yScale(d); })
            .attr("fill",function(d){return "rgb(120,200,"+(d*5)+")"; });

        //添加文本
        svg.selectAll("text")
            .data(dataset)
            .enter()
            .append("text")
            .text(function(d){ return d;})
            .attr("class","text")
            .attr("x",function(d,i){ return xScale(i)+xScale.bandwidth()/2;})
            .attr("y",function(d){ return h-yScale(d)+14; });
        
        //给p标签添加点击事件
        d3.select("button")
            .on("click",function(){
                //新的数据集
                dataset=[11,12,5,20,100,39,55,49,15,66,72,51,21,43,33,65,25,48,36];

                //更新y轴比例尺，更新后无论多大的数据都不会溢出
                var yScale=d3.scaleLinear()
                              .domain([0,d3.max(dataset,function(d) {return d; })])
                              .range([0,h]);
              
                //更新矩形
                svg.selectAll("rect")
                    .data(dataset)
                    .transition() //添加过渡效果
                    .duration(1000) //控制动画的持续时间
                    //.ease(d3.easeLinear)  //添加缓动类型
                    .attr("y",function(d){ return h-yScale(d); })
                    .attr("height",function(d){ return yScale(d); })
                    //同步更新颜色
                    .attr("fill",function(d){return "rgb(100,200,"+Math.round(d*5)+")"; });

                svg.selectAll("text")
                    .data(dataset)
                    .transition() //添加过渡效果
                    .duration(1500) //控制动画的持续时间
                    //.ease(d3.easeLinear)
                    .text(function(d){ return d;})
                    .attr("x",function(d,i){ return xScale(i)+xScale.bandwidth()/2;})
                    .attr("y",function(d){ return h-yScale(d)+14; });
            });
    </script>
</body>    
</html>