上一节中我们学会了如何旋转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. Golang， 以17个简短代码片段，切底弄懂 channel 基础

    (原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...

  2. UWP中新加的数据绑定方式x:Bind分析总结

    UWP中新加的数据绑定方式x:Bind分析总结 0x00 UWP中的x:Bind 由之前有过WPF开发经验,所以在学习UWP的时候直接省略了XAML.数据绑定等几个看着十分眼熟的主题.学习过程中倒是也 ...

  3. 浅谈WEB页面提速（前端向）

    记得面试现在这份工作的时候,一位领导语重心长地谈道——当今的世界是互联网的世界,IT企业之间的竞争是很激烈的,如果一个网页的加载和显示速度,相比别人的站点页面有那么0.1秒的提升,那也是很大的一个成就 ...

  4. C语言 · 整数平均值

    编写函数,求包含n个元素的整数数组中元素的平均值.要求在函数内部使用指针操纵数组元素,其中n个整数从键盘输入,输出为其平均值. 样例输入: (输入格式说明:5为输入数据的个数,3 4 0 0 2 是以 ...

  5. 探索ASP.NET MVC5系列之~~~2.视图篇（上）---包含XSS防御和异步分部视图的处理

    其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...

  6. OEL上使用yum install oracle-validated 简化主机配置工作

    环境:OEL 5.7 + Oracle 10.2.0.5 RAC 如果你正在用OEL(Oracle Enterprise Linux)系统部署Oracle,那么可以使用yum安装oracle-vali ...

  7. ABP创建数据库操作步骤

    1 ABP创建数据库操作步骤 1.1 SimpleTaskSystem.Web项目中的Web.config文件修改数据库配置. <add name="Default" pro ...

  8. Android Studio 编译单个module

    前期自己要把gradle环境变量配置好 在Terminal中gradle命令行编译apk 输入gradle assembleRelease 会编译全部module编译单个modulecd ./xiru ...

  9. [Django]用户权限学习系列之Permission权限基本操作指令

    若需建立py文件进行测试,则在文件开始加入以下代码即可 #coding:utf-8 import os os.environ.setdefault("DJANGO_SETTINGS_MODU ...

  10. wp已死，metro是罪魁祸首！

    1.这篇文章肯定会有类似这样的评论:“我就是喜欢wp,我就是喜欢metro,我就是软粉“等类似的信仰论者发表的评论. 2.2014年我写过一篇文章,windows phone如何才能在中国翻身? 我现 ...