上一节中我们学会了如何旋转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. [原]CentOS7.2部署node-mapnik

    转载请注明表作者think8848及出处(http://think8848.cnblogs.com) node-mapnik依赖项中要求g++ >= 5, toolchain (>= GL ...

  2. NoSql数据库使用半年后在设计上面的一些心得

    NoSql数据库这个概念听闻许久了,也陆续看到很多公司和产品都在使用,优缺点似乎都被分析的清清楚楚.但我心里一直存有一个疑惑,它的出现究竟是为了解决什么问题? 这个疑惑非常大,为此我看了很多分析文章, ...

  3. 0-1背包问题蛮力法求解（java版本）

    sloves: package BackPack; public class Solves {  public int[] DecimaltoBinary(int n,int m)  {   int ...

  4. Dreamweaver 扩展开发：C-level extensibility and the JavaScript interpreter

    The C code in your library must interact with the Dreamweaver JavaScript interpreter at the followin ...

  5. nodejs中获取时间戳、时间差

    Nodejs中获取时间戳的方法有很多种,例如: new Date().getTime() Date.now() process.uptime() process.hrtime() 平时想获取一个时间戳 ...

  6. Javascript实用方法二

    承接上一篇, Object keys object的keys方法能够获取一个给定对象的所有键(key/属性名)并以数组的形式返回.这个方法可以用于键的筛选.匹配等. var basket = { st ...

  7. js学习之函数的参数传递

    我们都知道在 ECMAScript 中,数据类型分为原始类型(又称值类型/基本类型)和引用类型(又称对象类型):这里我将按照这两种类型分别对函数进行传参,看一下到底发生了什么. 参数的理解 首先,我们 ...

  8. AbpZero--2.如何启动

    1.直接启动 VS中直接启动 2.IIS站点 IIS中配置一个站点来启动(推荐) 3.登录 系统默认创建2个用户 默认用户名:admin 密码:123qwe 租户:Default  默认用户名:adm ...

  9. BPM配置故事之案例13-触发消息通知

    老李:小明! 小明:--见你就没好事,又要我干嘛? 老李:额,小事小事,最近很多部门都觉得Boss的审批速度太慢了,能不能以后给审批人一个消息提醒? 小明:--有一种不太好的预感 老李:怎么,很困难么 ...

  10. ECharts数据图表系统？ 5分钟上手！

    目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...