<script type="text/javascript">
var w = ;
var h = ;
var barPadding = ; var dataset = [ , , , , , , , , , ,, , , , , , , , , ]; //create svg
var svg = d3.select("body").append("svg")
.attr("width", w).attr("height", h); svg.selectAll("rect")
.data(dataset).enter()
.append("rect")
.attr("x",function(d,i){ return i * (w/dataset.length);})
.attr("y", function(d){ return h - (d*);})
.attr("width", function(d,i){return w/dataset.length - barPadding;})
.attr("height", function(d){return d*;})
.attr("fill", function(d){return "rgb(0,0," +(d*)+ ")";}) //set label
svg.selectAll("text")
.data(dataset).enter()
.append("text")
.text(function(d){return d;})
.attr("text-anchor","middle")
.attr("x",function(d,i){
return i*(w/dataset.length)+(w/dataset.length-barPadding)/;})
.attr("y",function(d){return h-(d*)+;})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill","rgb(255,255,255)") </script>

前面的直方图使用的数据都是static datasets, 但现实世界中数据大多都是随时间变化的。有时我们希望图表能反映那些变化。在D3中,通过updates可以更新数据,changes可视化可以通过transitions,motion表现出来

有序的数据(ordinal data: typically categories with some inherent order to them),例如:

  • freshman, sophomore, junior, senior
  • grade B, grade A, grade AA
  • strongly dislike, dislike, neutral, like, strongly like

We don’t have true ordinal data for use with this bar chart. Instead, we just want the bars to be drawn from left to right using the same order in which values occur in our dataset.

对这类数据需要用ordinal scale(序数比例尺);

var xScale = d3.scale.ordinal();
线性比例尺的定义域需要设置一个有两个值得数组,分别是最小值和最大值,例如var xScale = d3.scale.linear().domain([0,100]);
而序数比例尺的定义域的设置和线性比例尺不一样,可以指定an array with the category names,例如:.domain(["freshman","sophomore","junior","senior"])
上面直方图中数据设置序数比例尺:
.domain(d3.range(dataset.length))  

//等价于
.domain([, , , , , , , , , ,
, , , , , , , , , ]) //d3.range(10)返回一个数组[0,1,2,3,4,5,6,7,8,9]

ordinal scales 使用离散 ranges, meaning输出值是预先定义好的,可以数值化或不数值化;

可以使用range()函数定义值域, 或者使用更平滑的 rangeBands()函数, 它利用最小值和最大值,根据domain的length自动分割成均匀的chunks or “bands。 For example:

.rangeBands([, w])
/*
this says “calculate even bands starting at 0 and ending at w, then set this scale’s range to those bands.” In our case, we specified 20 values in the domain, so D3 will calculate: (w - 0) / xScale.domain().length
(600 - 0) / 20
600 / 20
30 */

In the end, each band will be 30 “wide.”

也可以加入第二个参数,以设置每个band之间的间隔; Here, I’ve used 0.2, meaning that 20 percent of the width of each band will be used for spacing in between bands:

.rangeBands([, w], 0.2)

还可以使用 rangeRoundBands(), 类似于 rangeBands(), 只是此函数的输出值是舍入后最接近的整数, so 12.3456 becomes just 12, for example. This is helpful for keeping visual elements lined up precisely on the pixel grid, for clean, sharp edges.

.rangeRoundBands([, w], 0.05);    //This gives us nice, clean pixel values, with a teensy bit of visual space between them.

Interaction via Event Listeners

<p>Click on this text to update the chart with new data values (once).</p>
//On click, update with new data
d3.select("p")
.on("click", function() { //New values for dataset
dataset = [ , , , , , , , , , ,
, , , , , , , , , ]; //Update all rects
svg.selectAll("rect")
.data(dataset)
.attr("y", function(d) {
return h - yScale(d);
})
.attr("height", function(d) {
return yScale(d);
});
            .attr("fill", function(d) {   // <-- Down here!
return "rgb(0, 0, " + (d * 10) + ")";
});
});

设置新的label text

svg.selectAll("text")
.data(dataset)
.text(function(d) {
return d;
})
.attr("x", function(d, i) {
return xScale(i) + xScale.rangeBand() / ;
})
.attr("y", function(d) {
return h - yScale(d) + ;
});

Transitions

.transition()   //过渡效果

Without transition(), D3 evaluates every attr() statement immediately, so the changes in height and fill happen right away. When you add transition(), D3 introduces the element of time. Rather than applying new values all at once, D3 interpolates between the old values and the new values, meaning it normalizes the beginning and ending values, and calculates all their in-between states. D3 is also smart enough to recognize and interpolate between different attribute value formats. For example, if you specified a height of 200px to start but transition to just 100 (without the px). Or if a blue fill turns rgb(0,255,0). You don’t need to fret about being consistent; D3 takes care of it.

//Update all rects
svg.selectAll("rect")
.data(dataset)
.transition() // <-- This is new! Everything else here is unchanged.
.duration() // <-- Now this is new!
.attr("y", function(d) {
return h - yScale(d);
})
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * ) + ")";
});
//Update all labels
svg.selectAll("text")
.data(dataset)
.transition() // <-- This is new,
.duration() // and so is this.
.text(function(d) {
return d;
})
.attr("x", function(d, i) {
return xScale(i) + xScale.rangeBand() / ;
})
.attr("y", function(d) {
return h - yScale(d) + ;
});

duration() 定义过渡时间

The duration() must be specified after the transition(), and durations are always specified in milliseconds, so duration(1000) is a one-second duration.

ease()定义过渡类型

ease() must also be specified after transition(), but before the attr() statements to which the transition applies. ease() can come before or after duration(), but this sequence makes the most sense to me:

…   //Selection statement(s)
.transition()
.duration()
.ease("linear")
… //attr() statements

其他内置的 easing functions有,例如:

circle:Gradual ease in and acceleration until elements snap into place.

elastic:The best way to describe this one is “sproingy.”

bounce:Like a ball bouncing, then coming to rest.

delay()设置过渡什么时候开始,可以指定一个值, 毫秒级,也可以指定一个函数


.transition()
.delay() //1,000 ms or 1 second
.duration() //2,000 ms or 2 seconds

.transition()
.delay(function(d, i) {
return i * ;
})
.duration()

												

D3——Updates, Transitions, and Motion的更多相关文章

  1. [D3] Reuse Transitions in D3 v4

    D3 transitions start executing as soon as they’re created, and they’re destroyed once they end. This ...

  2. [D3] Animate Transitions in D3 v4

    D3 makes it easy to add meaningful animations to your data visualizations. Whether it’s fading in ne ...

  3. 数据可视化(8)--D3数据的更新及动画

    最近项目组加班比较严重,D3的博客就一拖再拖,今天终于不用加班了,赶紧抽点时间写完~~ 今天就将D3数据的更新及动画写一写~~ 接着之前的博客写~~ 之前写了一个散点图的例子,下面可以自己写一个柱状图 ...

  4. unity3d 学习笔记_____Native2d 刚体、冲击、联合使用

    Mass Mass of the rigidbody. Linear Drag Drag coefficient affecting positional movement. Angular Drag ...

  5. Android 5.0自定义动画

    材料设计中的动画对用户的操作给予了反馈,并且在与应用交互时提供了持续的可见性.材料主题提供了一些按钮动画和活动过渡,Android 5.0允许你自定义动画并且可以创建新的动画: Touch Feedb ...

  6. Host–Parasite(主从关系): Graph LSTM-in-LSTM for Group Activity Recognition

    This article aims to tackle the problem of group activity recognition in the multiple-person scene. ...

  7. [D3] Animate Chart Axis Transitions in D3 v4

    When the data being rendered by a chart changes, sometimes it necessitates a change to the scales an ...

  8. [D3] 12. Basic Transitions with D3

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. D3中动画(transition函数)的使用

    关于transition的几个基本点: 1. transition()是针对与每个DOM element的,每个DOM element的transition并不会影响其他DOM element的tra ...

随机推荐

  1. 百度开源e-chart初探

    前言: 近年来,在数据服务的公司中,数据可视化越来越重要.随着而来的,国内外正在如火如荼的开发各种在线js视图展示框架.而百度的e-chart算是实用性较高且体验最好的!今天闲来无事,便来玩玩~ ec ...

  2. laravel数据迁移

    创建数据库迁移: php artisan make:migration create_表名_table 回车后就会创建迁移版本   回滚数据库迁移: php artisan migrate 会将数据按 ...

  3. 怎样在 Azure 应用服务中生成和部署 Java API 应用

    先决条件 Java 开发人员工具包 8(或更高版本) 已在开发计算机上安装 Maven 已在开发计算机上安装 Git Azure 订阅付费版或试用版 HTTP 测试应用程序,如 Postman 使用 ...

  4. Docker学习(二): 镜像的使用与构建

    特别声明: 博文主要是学习过程中的知识整理,以便之后的查阅回顾.部分内容来源于网络(如有摘录未标注请指出).内容如有差错,也欢迎指正! =============系列文章============= 1 ...

  5. mysql:名次排名 (并列与不并列)

    http://www.cnblogs.com/zengguowang/p/5541431.html sql语句查询排名 思路:有点类似循环里面的自增一样,设置一个变量并赋予初始值,循环一次自增加1,从 ...

  6. centos关闭selinux

    SELinux(Security-Enhanced Linux) 是美国国家安全局(NSA)对于强制访问控制的实现,是 Linux历史上最杰出的新安全子系统.在这种访问控制体系的限制下,进程只能访问那 ...

  7. uestc Another LCIS

    Another LCIS Time Limit: 1000 ms Memory Limit: 65536 kB Solved: 193 Tried: 2428 Description For a se ...

  8. Mac(OS X)中Git安装与GitHub基本使用

    GitHub是一个面向开源及私有软件项目的托管平台.开源代码库以及版本控制系统,因为只支持 Git 作为唯一的版本库格式进行托管,故名 GitHub.通常在Windows下使用GitHub的教程是非常 ...

  9. CentOS6下docker的安装和使用

    CentOS6下docker的安装和使用 Docker是一个开源的应用容器引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.利用Linux的LXC.AUFS.Go语言.cgroup ...

  10. BZOJP1096[ZJOI2007]仓库建设——solution

    Description L公司有N个工厂,由高到底分布在一座山上.如图所示,工厂1在山顶,工厂N在山脚.由于这座山处于高原内陆地区(干燥少雨),L公司一般把产品直接堆放在露天,以节省费用.突然有一天, ...