上一节中我们学会了如何旋转x轴标签以及自定义标签内容，在这一节中，我们将接触动画（transition）

首先，我们要在页面上添加一个按钮，当我们点击这个按钮时，调用我们的动画。所以，我们还需要在原来的基础上添加两个东西。

添加一个按钮

<div id="option">
<input name="updateButton"
    type="button"
    value="Update"
    onclick="updateData()"
/>
</div>

添加一个动画函数

function updateData() {
  //再次获取数据
  d3.tsv("../data/data-alt.tsv", function(error, data){
    data.forEach(function(d){
      d.date = parseDate(d.date);
      d.close = +d.close;
    });
 
    //设置数据的规模
    x.domain(d3.extent(data, function(d){ return d.date }));
    y.domain([0, d3.max(data, function(d){ return d.close })]);
 
    //选择我们想要应用变化的部分
    var svg = d3.select("body").transition();
 
    //变化
    svg.select(".line")
      .duration(750)
      .attr("d", valueline(data));
    svg.select(".x.axis")
      .duration(750)
      .call(xAxis);
    svg.select(".y.axis")
      .duration(750)
      .call(yAxis);
  });
}

在上面的代码中， 我们首先要获取一个组先的数据，所以，我们从新的数据文件（data-alt.tsv）中读取新的数据。然后，仿造前面绘制图表的方法来进行绘制，不同的是，这里加入一个新的方法-transition()。

transiton(int): 使图表从一个状态过渡到另一个状态。括号里面可以是一个整数，表示动画执行的时长，当然也可以是一个ease(type[, arguments…])方法，来表示丰富的运动。

目前的代码为：

 <!DOCTYPE html>

 <meta charset="utf-8">

 <style> /* set the CSS */

 body { font: 12px Arial;}

 path {

     stroke: steelblue;

     stroke-width: 2;

     fill: none;

 }

 .axis path,

 .axis line {

     fill: none;

     stroke: grey;

     stroke-width: 1;

     shape-rendering: crispEdges;

 }

 </style>

 <body>

 <div id="option">

     <input name="updateButton"

            type="button"

            value="Update"

            onclick="updateData()" />

 </div>

 <!-- load the d3.js library -->

 <script type="text/javascript" src="d3/d3.v3.js"></script>

 <script>

 // Set the dimensions of the canvas / graph

 var margin = {top: 30, right: 20, bottom: 30, left: 50},

     width = 600 - margin.left - margin.right,

     height = 270 - margin.top - margin.bottom;

 // Parse the date / time

 var parseDate = d3.time.format("%d-%b-%y").parse;

 // Set the ranges

 var x = d3.time.scale().range([0, width]);

 var y = d3.scale.linear().range([height, 0]);

 // Define the axes

 var xAxis = d3.svg.axis().scale(x)

     .orient("bottom").ticks(5);

 var yAxis = d3.svg.axis().scale(y)

     .orient("left").ticks(5);

 // Define the line

 var    valueline = d3.svg.line()

     .x(function(d) { return x(d.date); })

     .y(function(d) { return y(d.close); });

 // Adds the svg canvas

 var    svg = d3.select("body")

     .append("svg")

         .attr("width", width + margin.left + margin.right)

         .attr("height", height + margin.top + margin.bottom)

     .append("g")

         .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 // Get the initial data

 d3.tsv("data/data.tsv", function(error, data) {

     data.forEach(function(d) {

         d.date = parseDate(d.date);

         d.close = +d.close;

     });

     // Scale the range of the data

     x.domain(d3.extent(data, function(d) { return d.date; }));

     y.domain([0, d3.max(data, function(d) { return d.close; })]);

     // Add the valueline path.

     svg.append("path")

         .attr("class", "line")

         .attr("d", valueline(data));

     // Add the X Axis

     svg.append("g")

         .attr("class", "x axis")

         .attr("transform", "translate(0," + height + ")")

         .call(xAxis);

     // Add the Y Axis

     svg.append("g")

         .attr("class", "y axis")

         .call(yAxis);

 });

 // ** Update data section (Called from the onclick)

 function updateData() {

     // Get the data again

     d3.tsv("data/data-alt.tsv", function(error, data) {

            data.forEach(function(d) {

             d.date = parseDate(d.date);

             d.close = +d.close;

         });

         // Scale the range of the data again

         x.domain(d3.extent(data, function(d) { return d.date; }));

         y.domain([0, d3.max(data, function(d) { return d.close; })]);

     // Select the section we want to apply our changes to

     var svg = d3.select("body").transition();

     // Make the changes

         svg.select(".line")   // change the line

             .duration(750)

             .attr("d", valueline(data));

         svg.select(".x.axis") // change the x axis

             .duration(750)

             .call(xAxis);

         svg.select(".y.axis") // change the y axis

             .duration(750)

             .call(yAxis);

     });

 }

 </script>

 </body>

下节我们将把图表中的曲线图变成散点图，以及添加提示框（Tooltips）效果。

D3.js学习（七）的更多相关文章

  1. 数据可视化的优秀入门书籍有哪些,D3.js 学习资源汇总

    习·D3.js 学习资源汇总 除了D3.js自身以外,许多可视化工具包都是基于D3开发的,所以对D3的学习就显得很重要了,当然如果已经有了Javascript的经验,学起来也会不费力些. Github ...

  2. D3.js学习（一）

    从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...

  3. D3.js学习记录【转】【新】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. D3.js学习笔记（六）——SVG基础图形和D3.js

    目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...

  5. d3.js学习笔记（五）——将数据结构化为D3.js可处理的

    目标 在这一章,你将会理解如何对数据进行结构化,来更好的使用D3.js. 我们将会回顾我们之前已经学习的,学习D3.js如何使用选集(selections),JavaScript对象基础,以及如何最优 ...

  6. D3.js学习笔记（一）——DOM上的数据绑定

    开始学习D3.js,网上没有找到很满意的中文教程,但是发现了一个很好的英文教程,讲解的非常详细.从一个初始简单的HTML网页开始,逐步加入D3.js的应用,几乎是逐句讲解.学习的时候,就顺便翻译成中文 ...

  7. D3.js学习记录

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. D3.js学习笔记（四）—— 使用SVG坐标空间

    目标 在这一章,你将要使用D3.js基于一些数据把SVG元素添加到你想要的坐标位置上. 我们的目标就是使用下面的数据集: var spaceCircles = [30,70,110]; 并使用D3.j ...

  9. D3.js学习笔记（三）——创建基于数据的SVG元素

    目标 在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中.这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据. 注意:不同于前几章,我们从一个完整的代码开始, ...

随机推荐

  1. nodejs进阶(6)—连接MySQL数据库

    1. 建库连库 连接MySQL数据库需要安装支持 npm install mysql 我们需要提前安装按mysql sever端 建一个数据库mydb1 mysql> CREATE DATABA ...

  2. 我们是怎么做Code Review的

    前几天看了<Code Review 程序员的寄望与哀伤>,想到我们团队开展Code Review也有2年了,结果还算比较满意,有些经验应该可以和大家一起分享.探讨.我们为什么要推行Code ...

  3. Javascript生成二维码（QR）

    网络上已经有非常多的二维码编码和解码工具和代码,很多都是服务器端的,也就是说需要一台服务器才能提供二维码的生成.本着对服务器性能的考虑,这种小事情都让服务器去做,感觉对不住服务器,尤其是对于大流量的网 ...

  4. Xamarin+Prism开发详解五：页面布局基础知识

    说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的. 布局常见标签: StackLayout Abso ...

  5. Xamarin+Prism开发详解四：简单Mac OS 虚拟机安装方法与Visual Studio for Mac 初体验

    Mac OS 虚拟机安装方法 最近把自己的电脑升级了一下SSD固态硬盘,总算是有容量安装Mac 虚拟机了!经过心碎的安装探索,尝试了国内外的各种安装方法,最后在youtube上找到了一个好方法. 简单 ...

  6. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  7. 用神奇的currentColor制作简洁的颜色动画效果

    先上一个兼容性总结图:老版本ie可以直接用复杂方法了,套用某表情包的话:  2016年了,做前端你还考虑兼容IE6?你这简直是自暴自弃! 好了,知道了兼容性,我们可以放心的使用了. 在CSS3中扩展了 ...

  8. 模仿Linux内核kfifo实现的循环缓存

    想实现个循环缓冲区(Circular Buffer),搜了些资料多数是基于循环队列的实现方式.使用一个变量存放缓冲区中的数据长度或者空出来一个空间来判断缓冲区是否满了.偶然间看到分析Linux内核的循 ...

  9. ASP.NET Core 中文文档目录

    翻译计划 五月中旬 .NET Core RC2 如期发布,我们遂决定翻译 ASP.NET Core 文档.我们在 何镇汐先生. 悲梦先生. 张仁建先生和 雷欧纳德先生的群中发布了翻译计划招募信息,并召 ...

  10. VS项目中使用Nuget还原包后编译生产还一直报错？

    Nuget官网下载Nuget项目包的命令地址:https://www.nuget.org/packages 今天就遇到一个比较奇葩的问题,折腾了很久终于搞定了: 问题是这样的:我的解决方案原本是好好的 ...