D3 支持制作动态的图表。有时候，图表的变化需要缓慢的发生，以便于让用户看清楚变化的过程，也能给用户不小的友好感。

一、什么是动态效果

　　绘制完成后不再发生变化的，这是静态的图表。

　　动态的图表，是指图表在某一时间段会发生某种变化，可能是形状、颜色、位置等，而且用户是可以看到变化的过程的。

　　例如，有一个圆，圆心为 (100, 100)。现在我们希望圆的 x 坐标从 100 移到 300，并且移动过程在 2 秒的时间内发生。

　　这种时候就需要用到动态效果，在 D3 里我们称之为过渡（transition）。

二、实现动态的方法

　　D3 提供了 4 个方法用于实现图形的过渡：从状态 A 变为状态 B。

　　1、transition()

　　　　启动过渡效果。

　　　　其前后是图形变化前后的状态（形状、位置、颜色等等），例如：

.attr("fill","red")         //初始颜色为红色

.transition()               //启动过渡

.attr("fill","steelblue")   //终止颜色为铁蓝色

　　　　D3 会自动对两种颜色（红色和铁蓝色）之间的颜色值（RGB值）进行插值计算，得到过渡用的颜色值。我们无需知道中间是怎么计算的，只需要享受结果即可。

　　2、duration()

　　　　指定过渡的持续时间，单位为毫秒。

　　　　  如 duration(2000) ，指持续 2000 毫秒，即 2 秒。

　　3、ease()

　　　　指定过渡的方式，常用的有：

      • linear：普通的线性变化
      • circle：慢慢地到达变换的最终状态
      • elastic：带有弹跳的到达最终状态
      • bounce：在最终状态处弹跳几次

　　　　调用时，格式形如： ease(“bounce”)。

　　4、delay()

　　　　指定延迟的时间，表示一定时间后才开始转变，单位同样为毫秒。此函数可以对整体指定延迟，也可以对个别指定延迟。例如，对整体指定时：

.transition()

.duration(1000)

.delay(500)

　　　　如此，图形整体在延迟 500 毫秒后发生变化，变化的时长为 1000 毫秒。因此，过渡的总时长为1500毫秒。

　　　　又如，对一个一个的图形（图形上绑定了数据）进行指定时：

.transition()

.duration(1000)

.delay(funtion(d,i){

    return 200*i;

})

　　　　如此，假设有 10 个元素，那么第 1 个元素延迟 0 毫秒（因为 i = 0），第 2 个元素延迟 200 毫秒，第 3 个延迟 400 毫秒，依次类推….整个过渡的长度为 200 * 9 + 1000 = 2800 毫秒。

三、实现简单的动态效果

　　下面将在 SVG 画布里添加三个圆，圆出现之后，立即启动过渡效果。

　　1、第一个圆，要求移动 x 坐标。

var circle1 = svg.append("circle")

        .attr("cx", 100)

        .attr("cy", 100)

        .attr("r", 45)

        .style("fill","green");

//在1秒（1000毫秒）内将圆心坐标由100变为300

circle1.transition()

    .duration(1000)

    .attr("cx", 300);

　 2、第二个圆，要求既移动 x 坐标，又改变颜色。

var circle2 = svg.append("circle")... //与第一个圆一样，省略部分代码

//在1.5秒（1500毫秒）内将圆心坐标由100变为300，

//将颜色从绿色变为红色

circle2.transition()

    .duration(1500)

    .attr("cx", 300)

    .style("fill","red");

　　3、第三个圆，要求既移动 x 坐标，又改变颜色，还改变半径。

var circle3 = svg.append("circle")... //与第一个圆一样，省略部分代码

//在2秒（2000毫秒）内将圆心坐标由100变为300

//将颜色从绿色变为红色

//将半径从45变成25

//过渡方式采用bounce（在终点处弹跳几次）

circle3.transition()

    .duration(2000)

    .ease("bounce")

    .attr("cx", 300)

    .style("fill","red")

    .attr("r", 25);

四、给柱形图加上动态效果

　　在添加文字元素和矩形元素的时候，启动过渡效果，让各柱形和文字缓慢升至目标高度，并且在目标处跳动几次。

　　对于文字元素，代码如下：

.attr("y",function(d){

    var min = yScale.domain()[0];

    return yScale(min);

})

.transition()

.delay(function(d,i){

    return i * 200;

})

.duration(2000)

.ease("bounce")

.attr("y",function(d){

    return yScale(d);

});

　　文字元素的过渡前后，发生变化的是 y 坐标。其起始状态是在 y 轴等于 0 的位置（但要注意，不能在起始状态直接返回 0，要应用比例尺计算画布中的位置）。终止状态是目标值。

　　对于矩形元素，思想与文字元素一样，只是在计算起始状态时要稍微复杂一些

<html>

<head>

    <meta charset="utf-8">

    <title>让图表动起来</title>  

<style>

    .axis path,

    .axis line{

        fill: none;

        stroke: black;

        shape-rendering: crispEdges;

    }

    .axis text {

        font-family: sans-serif;

        font-size: 11px;

    }

    .MyRect {

        fill: steelblue;

    }

    .MyText {

        fill: white;

        text-anchor: middle;

    }

</style>

</head> 

<body>

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

    <script>

    //画布大小

    var width = 400;

    var height = 400;

    //在 body 里添加一个 SVG 画布

    var svg = d3.select("body")

        .append("svg")

        .attr("width", width)

        .attr("height", height);

    //画布周边的空白

    var padding = {left:30, right:30, top:20, bottom:20};

    //定义一个数组

    var dataset = [10, 20, 30, 40, 33, 24, 12, 5];

    //x轴的比例尺

    var xScale = d3.scale.ordinal()

        .domain(d3.range(dataset.length))

        .rangeRoundBands([0, width - padding.left - padding.right]);

    //y轴的比例尺

    var yScale = d3.scale.linear()

        .domain([0,d3.max(dataset)])

        .range([height - padding.top - padding.bottom, 0]);

    //定义x轴

    var xAxis = d3.svg.axis()

        .scale(xScale)

        .orient("bottom");

    //定义y轴

    var yAxis = d3.svg.axis()

        .scale(yScale)

        .orient("left");

    //矩形之间的空白

    var rectPadding = 4;

    //添加矩形元素

    var rects = svg.selectAll(".MyRect")

        .data(dataset)

        .enter()

        .append("rect")

        .attr("class","MyRect")

        .attr("transform","translate(" + padding.left + "," + padding.top + ")")

        .attr("x", function(d,i){

            return xScale(i) + rectPadding/2;

        } )

        .attr("width", xScale.rangeBand() - rectPadding )

        .attr("y",function(d){

            var min = yScale.domain()[0];

            return yScale(min);

        })

        .attr("height", function(d){

            return 0;

        })

        .transition()

        .delay(function(d,i){

            return i * 200;

        })

        .duration(2000)

        .ease("bounce")

        .attr("y",function(d){

            return yScale(d);

        })

        .attr("height", function(d){

            return height - padding.top - padding.bottom - yScale(d);

        });

    //添加文字元素

    var texts = svg.selectAll(".MyText")

        .data(dataset)

        .enter()

        .append("text")

        .attr("class","MyText")

        .attr("transform","translate(" + padding.left + "," + padding.top + ")")

        .attr("x", function(d,i){

            return xScale(i) + rectPadding/2;

        } )

        .attr("dx",function(){

            return (xScale.rangeBand() - rectPadding)/2;

        })

        .attr("dy",function(d){

            return 20;

        })

        .text(function(d){

            return d;

        })

        .attr("y",function(d){

            var min = yScale.domain()[0];

            return yScale(min);

        })

        .transition()

        .delay(function(d,i){

            return i * 200;

        })

        .duration(2000)

        .ease("bounce")

        .attr("y",function(d){

            return yScale(d);

        });

    //添加x轴

    svg.append("g")

        .attr("class","axis")

        .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")

        .call(xAxis); 

    //添加y轴

    svg.append("g")

        .attr("class","axis")

        .attr("transform","translate(" + padding.left + "," + padding.top + ")")

        .call(yAxis);

</script>

</body>

</html>

D3.js 让图表动起来的更多相关文章

  1. [资料搜集狂]D3.js数据可视化开发库

    偶然看到一个强大的D3.js,存档之. D3.js 是近年来十分流行的一个数据可视化开发库. 采用BSD协议 源码:https://github.com/mbostock/d3 官网:http://d ...

  2. 发现一款比echarts更牛B，效果更炫的图表组件 d3.js

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code d3.js  ,能制作更加复杂的图表 https://github.com/d3/d3 ...

  3. 【 D3.js 入门系列 --- 3 】 做一个简单的图表！

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  4. D3.js使用过程中的常见问题(D3版本D3V4)

    目录 一.学习D3我必须要学习好SVG矢量图码? 二.如何理解D3给Dom节点绑定数据时的Update.Enter和Exit模式 三.D3绑定数据时用datum与data有什么不一样? 四.SVG图中 ...

  5. 【 D3.js 入门系列 — 11 】 入门总结

    D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...

  6. d3.js制作连线动画图和编辑器

    此文章为原创文章,原文地址:https://www.cnblogs.com/eagle1098/p/11431679.html 连线动画图 编辑器 效果如上图所示.本项目使用主要d3.jsv4制作,分 ...

  7. D3.js学习（七）

    上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来 ...

  8. D3.js学习（一）

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

  9. 【 D3.js 高级系列 — 9.0 】 交互式提示框

    一般来说,图表中不宜存在过多文字.但是,有时需要一些文字来描述某些图形元素.那么,可以实现一种交互:当用户鼠标滑到某图形元素时,出现一个提示框,里面写有描述文字.这是一种简单.普遍的交互式,几乎适用于 ...

随机推荐

  1. Ajax案例：简易的购书网页

    ****使用Ajax可以不需要刷新整个页面,而使局部页面更新的技术: ****JSON是JavaScript得原生格式,JavaScript中处理JSON数据不需要特殊的工具或架包,其规则很简单,对象 ...

  2. Sublime Text shift+ctrl妙用、Sublime Text快捷组合键大全

    Package Control 安装方法 首先通过快捷键 ctrl+` 或者 View > Show Console 打开控制台,然后粘贴相应的 Python 安装代码. 1 :按住shift+ ...

  3. Intent官方教程(4)用Intent构造应用选择框

    Forcing an app chooser When there is more than one app that responds to your implicit intent, the us ...

  4. VM安装失败

    出现:VMware安装失败 “Failed to create the requested registry key Key:installer Error:1021" 解决: 开始--运行 ...

  5. 在WIn32程序中使用MFC的CInternetSession运行异常，主要是因为获取目前应用程序名出错的解决办法

    转载:http://group.gimoo.net/review/22564 头文件#include <afxinet.h"> 在非MFC工程中使用CInternetSessio ...

  6. Luence学习笔记

    1.Luence的核心索引类 IndexWriter:建立索引的核心组件 Directory:代表一个lucene索引项的位置,是一个抽象类其子类有FSDirectory和RAMDirectory F ...

  7. .Net验证码实现基础--Draw

    命名空间 using System.Draw; using System.Draw.Drawing2D; 在form等控件的 事件中 添加 paint事件 ///////画各种形状(空心)////// ...

  8. BZOJ 3532: [Sdoi2014]Lis （最大流）

    题目链接:http://www.lydsy.com:808/JudgeOnline/problem.php?id=3532 题意:给出三个数列ABC,长度均为n.删除A中的某些数字,使得A的最长上升子 ...

  9. C#在泛型类中，通过表达式树构造lambda表达式

    场景 最近对爬虫的数据库架构做调整,需要将数据迁移到MongoDB上去,需要重新实现一个针对MongoDB的Dao泛型类,好吧,动手开工,当实现删除操作的时候问题来了. 我们的删除操作定义如下:voi ...

  10. Tomcat源码导入Eclipse测试

    想要研究下Tomcat的体系结构或者源码,最好将Tomcat的源码导入到ide中,编写实例进行代码跟踪(debug). 这里参考了网上一些资料,将自己操作过程记个流水账. 准备: 1.Tomcat源码 ...