上一节中我们学会了如何旋转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. 可爱的豆子——使用Beans思想让Python代码更易维护

    title: 可爱的豆子--使用Beans思想让Python代码更易维护 toc: false comments: true date: 2016-06-19 21:43:33 tags: [Pyth ...

  2. jQuery之Deferred源码剖析

    一.前言 大约在夏季,我们谈过ES6的Promise(详见here),其实在ES6前jQuery早就有了Promise,也就是我们所知道的Deferred对象,宗旨当然也和ES6的Promise一样, ...

  3. 从零开始编写自己的C#框架（26）——小结

    一直想写个总结,不过实在太忙了,所以一直拖啊拖啊,拖到现在,不过也好,有了这段时间的沉淀,发现自己又有了小小的进步.哈哈...... 原想框架开发的相关开发步骤.文档.代码.功能.部署等都简单的讲过了 ...

  4. 实现一个类 RequireJS 的模块加载器 (二)

    2017 新年好 ! 新年第一天对我来说真是悲伤 ,早上兴冲冲地爬起来背着书包跑去实验室,结果今天大家都休息 .回宿舍的时候发现书包湿了,原来盒子装的牛奶盖子松了,泼了一书包,电脑风扇口和USB口都进 ...

  5. 【基于WinForm+Access局域网共享数据库的项目总结】之篇一：WinForm开发总体概述与技术实现

    篇一:WinForm开发总体概述与技术实现 篇二:WinForm开发扇形图统计和Excel数据导出 篇三:Access远程连接数据库和窗体打包部署 [小记]:最近基于WinForm+Access数据库 ...

  6. PHP类和对象之重载

    PHP中的重载指的是动态的创建属性与方法,是通过魔术方法来实现的.属性的重载通过__set,__get,__isset,__unset来分别实现对不存在属性的赋值.读取.判断属性是否设置.销毁属性. ...

  7. git远程库GitHub

    首先,注册一个GitHub(github.com)帐号,免费获得Git远程仓库 由于本地Git仓库和GitHub仓库之间的传输是通过SSH加密的,所以,需要一点设置: 第1步:创建SSH Key.在用 ...

  8. MongoDB学习笔记四—增删改文档下

    $slice 如果希望数组的最大长度是固定的,那么可以将 $slice 和 $push 组合在一起使用,就可以保证数组不会超出设定好的最大长度.$slice 的值必须是负整数. 假设$slice的值为 ...

  9. Linux的学习笔记

    Linux,1991年,系统安全,良好的可移植性,多用户,多任务,良好的兼容性,良好的用户界面, 主流的是RedHat或者CentOS, CentOS 设置的网关 192.168.2.2 Window ...

  10. nginx代理https站点（亲测）

    nginx代理https站点(亲测) 首先,我相信大家已经搞定了nginx正常代理http站点的方法,下面重点介绍代理https站点的配置方法,以及注意事项,因为目前大部分站点有转换https的需要所 ...