上一节中我们学会了如何旋转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. css-父标签中的子标签默认位置

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  2. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  3. SQL Server-表表达式基础回顾（二十四）

    前言 从这一节开始我们开始进入表表达式章节的学习,Microsoft SQL Server支持4种类型的表表达式:派生表.公用表表达式(CTE).视图.内嵌表值函数(TVF).简短的内容,深入的理解, ...

  4. 《如何使用Javascript判断浏览器终端设备》

    WEB开发中如何通过Javascript来判断终端为PC.IOS(iphone).Android呢? 可以通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端. va ...

  5. Oracle 表空间和用户权限管理

    一. 表空间 Oracle数据库包含逻辑结构和物理结构. 数据库的物理结构指的是构成数据库的一组操作系统文件. 数据库的逻辑结构是指描述数据组织方式的一组逻辑概念以及它们之间的关系. 表空间是数据库逻 ...

  6. 转: 解决Github访问超慢问题

    转自:http://zengrong.net/post/2092.htm 解决Github访问超慢问题 Github is so slowly. 这段时间访问 github 都非常慢,google了一 ...

  7. BZOJ3198[SDOI2013]SPRING

    Description Input Output Sample Input 3 3 1 2 3 4 5 6 1 2 3 0 0 0 0 0 0 4 5 6 Sample Output 2 HINT 题 ...

  8. 我的MYSQL学习心得（十四） 备份和恢复

    我的MYSQL学习心得(十四) 备份和恢复 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) ...

  9. XSS 前端防火墙 —— 可疑模块拦截

    上一篇介绍的系统,已能预警现实中的大多数 XSS 攻击,但想绕过还是很容易的. 由于是在前端防护,策略配置都能在源代码里找到,因此很快就能试出破解方案.并且攻击者可以屏蔽日志接口,在自己电脑上永不发出 ...

  10. mono for android 获取手机照片或拍照并裁剪保存

    axml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android ...