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

1实验概述动画和交互是数据可视化产品和用户进一步沟通的有效方式。本实验针对病毒感染数据，完成基于地图的带交互和动画的可视化图表实验目的完成本实验后，应该能够使用D3做出带过渡动画的报表关于过渡动画的相关设置绘制WannaCrypt病毒感染分布图制作根据时间变化的感染分布图实验背景为了更好的进行前端代码编程，我们推荐使用Hbuilder的编辑器，可以到其官网dcloud.io上下载其最新版本。在其“边改边看模式”进行代码修改，可以直接看到显示效果。在服务器上下载本实验的代码模板，插件和数据，加入到Hbuilder的项目目录中，完成实验环境准备，就可以开始实验了。实验步骤进入实验环境：1、使用编辑器打开MyDemo\Test-09\0901-transition.html2、编写一个简单的柱状图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*23、修改代码，在设置width代码下面一行编写.attr("height",0)//高度初始为零.transition()//设置过渡4、运行代码后效果如下，图为gif请单独打开此图片进入实验环境：1、使用编辑器打开MyDemo\Test-09\0902-transition-duration.html2、设置过渡时长.transition()//设置过渡.duration(1000)//设置过渡所需的时长.attr("x",function(d,i){returni*(w+offset)}).attr("height",function(d){returnd*2运行代码后效果如下，图为gif33、设置延迟时间，使用编辑器打开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*26、运行代码后效果如下，图为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")4if(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请单独打开此图片数据背景：2017年5月WannaCrypt病毒席卷全球，我们爬取了一段时间内被感染的用户的地理位置信息数据，通过地图进行展示，以发现其中的规律和特点。1、使用编辑器打开MyDemo\Test-09\0906-Map-Leaflet-WannaCrypt.html2、加载设置地图varcp=[33.56,108.98];zoomControl:falsemap.setView(cp,2);L.tileLayer('http://{s}./{z}/{x}/{y}.png',{attribution:'©<ahref="/copyright">OpenStreetMap</a>contributors'}).addTo(map);//leafletmapend5L.control.zoom({zoomInTitle:'放大',zoomOutTitle:'缩小',position:p在地图中添加Svgmap.svg=L.svg();map.addLayer(map.svg);//添加svg并会自动在svg中添加g标签，varsvg=d3.select(map.getPanes().overlayPane).select("svg").attr("class","zt-svg");根据数据绘制circle元素一下代码在注释#2处编写svg.selectAll("circle").data(data).enter().append("circle").attr("cx",function(d){returngetMapPosition(d.latlng).x.attr("cy",function(d){returngetMapPosition(d.latlng).y.attr("opacity",map.getZoom()/5).attr("r","3");监听地图缩放和拖拽事件更新圆点位置svg.style("display","none")updateView();updateView();fun