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