数据可视化基础实验9：完成可交互和带动画的图表.docx

1

实验

实验9：用D3完成可交互和带动画的图表

实验概述

动画和交互是数据可视化产品和用户进一步沟通的有效方式。本实验针对病毒感染数据，完成基于地图的带交互和动画的可视化图表

实验目的

完成本实验后，应该能够

使用D3做出带过渡动画的报表

关于过渡动画的相关设置

绘制WannaCrypt病毒感染分布图

制作根据时间变化的感染分布图

实验背景

为了更好的进行前端代码编程，我们推荐使用Hbuilder的编辑器，可以到其官网dcloud.io上下载其必威体育精装版版本。在其“边改边看模式”进行代码修改，可以直接看到显示效果。

在服务器上下载本实验的代码模板，插件和数据，加入到Hbuilder的项目目录中，完成实验环境准备，就可以开始实验了。

实验步骤

步骤1使用D3做出带过渡动画的柱状图

进入实验环境：

1、使用编辑器打开MyDemo\Test-09\0901-transition.html

2、编写一个简单的柱状图

vardataset=[20,45,26,38,44,60];

varw=20,offset=10;

d3.select(#myChart)

.selectAll(rect).data(dataset)

.enter().append(rect)

2

.attr(class,bar)

.attr(width,w)

.attr(x,function(d,i){returni*(w+offset)})

.attr(height,function(d){

returnd*2

})

3、修改代码，在设置width代码下面一行编写

.attr(height,0)//高度初始为零

.transition()//设置过渡

4、运行代码后效果如下，图为gif请单独打开此图片

步骤2关于过渡动画的相关设置

进入实验环境：

1、使用编辑器打开MyDemo\Test-09\0902-transition-duration.html

2、设置过渡时长

.transition()//设置过渡

.duration(1000)//设置过渡所需的时长

.attr(x,function(d,i){returni*(w+offset)})

.attr(height,function(d){

returnd*2

})

5、运行代码后效果如下，图为gif

5、

3

4、5

4、

5、

3、设置延迟时间，使用编辑器打开MyDemo\Test-09\0903-transition-delay.html编写如下代码

.delay(function(d,i){//设置延迟时间

returni/dataset.length*400;

})

.attr(x,function(d,i){returni*(w+offset)})

.attr(height,function(d){

returnd*2

})

6、运行代码后效果如下，图为gif请单独打开此图片

设置过渡动画类型，使用编辑器打开MyDemo\Test-09\0904-transition-ease.html

.ease(d3.easeQuadIn)//过渡动画类型

//d3.easeLinear

.attr(x,function(d,i){returni*(w+offset)})

.attr(height,function(d){

returnd*2

})

监听过渡事件，使用编辑器打开MyDemo\Test-09\0905-transition-event.html

.on(start,function(d,i){//开始

d3.select(this).attr(fill,red)

4

if(i===2){//模拟中断效果

d3.select(this).transition().ease(d3.easePolyIn);

}

})

.on(end,function(d){//结束

d3.select(this).attr(fill,blue)

})

.on(interrupt,function(d){//中断

d3.select(this).attr(fill,#00992c)

})

6、运行代码后效果如下，图为gif请单独打开此图片

步骤3绘制WannaCrypt病毒感染分布图

数据背景：

2017年5月WannaCrypt病毒席卷全球，我们爬取了一段时间内被感染的用户的地理位置信息数据，通过地图进行展示，以发现其中的规律和特点。

1、使用编辑器打开MyDemo\Test-09\090