數(shù)據(jù)可視化基礎(chǔ)實(shí)驗(yàn)9：完成可交互和帶動(dòng)畫的圖表

1實(shí)驗(yàn)概述動(dòng)畫和交互是數(shù)據(jù)可視化產(chǎn)品和用戶進(jìn)一步溝通的有效方式。本實(shí)驗(yàn)針對病毒感染數(shù)據(jù)，完成基于地圖的帶交互和動(dòng)畫的可視化圖表實(shí)驗(yàn)?zāi)康耐瓿杀緦?shí)驗(yàn)后，應(yīng)該能夠使用D3做出帶過渡動(dòng)畫的報(bào)表關(guān)于過渡動(dòng)畫的相關(guān)設(shè)置繪制WannaCrypt病毒感染分布圖制作根據(jù)時(shí)間變化的感染分布圖實(shí)驗(yàn)背景為了更好的進(jìn)行前端代碼編程，我們推薦使用Hbuilder的編輯器，可以到其官網(wǎng)dcloud.io上下載其最新版本。在其“邊改邊看模式”進(jìn)行代碼修改，可以直接看到顯示效果。在服務(wù)器上下載本實(shí)驗(yàn)的代碼模板，插件和數(shù)據(jù)，加入到Hbuilder的項(xiàng)目目錄中，完成實(shí)驗(yàn)環(huán)境準(zhǔn)備，就可以開始實(shí)驗(yàn)了。實(shí)驗(yàn)步驟進(jìn)入實(shí)驗(yàn)環(huán)境：1、使用編輯器打開MyDemo\Test-09\0901-transition.html2、編寫一個(gè)簡單的柱狀圖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、修改代碼，在設(shè)置width代碼下面一行編寫.attr("height",0)//高度初始為零.transition()//設(shè)置過渡4、運(yùn)行代碼后效果如下，圖為gif請單獨(dú)打開此圖片進(jìn)入實(shí)驗(yàn)環(huán)境：1、使用編輯器打開MyDemo\Test-09\0902-transition-duration.html2、設(shè)置過渡時(shí)長.transition()//設(shè)置過渡.duration(1000)//設(shè)置過渡所需的時(shí)長.attr("x",function(d,i){returni*(w+offset)}).attr("height",function(d){returnd*2運(yùn)行代碼后效果如下，圖為gif33、設(shè)置延遲時(shí)間，使用編輯器打開MyDemo\Test-09\0903-transition-delay.html編寫如下代碼.delay(function(d,i){//設(shè)置延遲時(shí)間returni/dataset.length*400;.attr("x",function(d,i){returni*(w+offset)}).attr("height",function(d){returnd*26、運(yùn)行代碼后效果如下，圖為gif請單獨(dú)打開此圖片設(shè)置過渡動(dòng)畫類型，使用編輯器打開MyDemo\Test-09\0904-transition-ease.html.ease(d3.easeQuadIn)//過渡動(dòng)畫類型//d3.easeLinear.attr("x",function(d,i){returni*(w+offset)}).attr("height",function(d){returnd*2監(jiān)聽過渡事件，使用編輯器打開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){//結(jié)束d3.select(this).attr("fill","blue").on("interrupt",function(d){//中斷d3.select(this).attr("fill","#00992c")6、運(yùn)行代碼后效果如下，圖為gif請單獨(dú)打開此圖片數(shù)據(jù)背景：2017年5月WannaCrypt病毒席卷全球，我們爬取了一段時(shí)間內(nèi)被感染的用戶的地理位置信息數(shù)據(jù)，通過地圖進(jìn)行展示，以發(fā)現(xiàn)其中的規(guī)律和特點(diǎn)。1、使用編輯器打開MyDemo\Test-09\0906-Map-Leaflet-WannaCrypt.html2、加載設(shè)置地圖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并會(huì)自動(dòng)在svg中添加g標(biāo)簽，varsvg=d3.select(map.getPanes().overlayPane).select("svg").attr("class","zt-svg");根據(jù)數(shù)據(jù)繪制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");監(jiān)聽地圖縮放和拖拽事件更新圓點(diǎn)位置svg.style("display","none")updateView();updateView();fun