- 先看下完成之后的效果圖：
左側是選擇切換國家以及可以進行自定義預測和預測參數的調整等；右側是預測的結果和過程動畫，可直觀的看到疫情隨時間的發展過程和在當前國家的擴散情況和人數占比等。
2、模擬疫情擴散
模擬疫情擴散的仿真模型在國內疫情比較嚴重的那段時間十分火爆，各大視頻網站都在分享類似的模擬動畫，大部分的模型都是用java、python等在服務端完成的。產品總是不關系技術實現的，至少在我們部門是這樣的，這個需求被拋到了前端實現（[淚奔.jpg]），抱怨和排斥是解決不了問題的，於是乎開始進行方案調研。
首先想到的是echart的氣泡圖，通過限定氣泡的大小來模擬數據點。但是echarts繪制氣泡需要提供每個氣泡的坐標，模型只能給出感染人數，無法計算數據點的位置，而且如果進行頻繁的setOption操作，會造成特別大的資源開銷，這對於我們客戶端是一個挑戰。
最后選擇用canvas自己寫，干就完了。
首先是布局問題，根據產品的要求，依據正態分布原則對數據點進行繪制，然后設定一個刷新時間點，一個合適的步伐長度，讓所有的點按照預先設定的步伐范圍進行隨機運動（模擬人員流動），然后感染人員也從中心點，按照正態分布的原則向外擴散。
后端傳過來的數據是當前國家的總人口數和當前日期的感染數，畫布有限不可能按照真實人數去繪制數據點，這個時候需要用到d3的Scales比例尺方法，把數據映射到一個合適的比例區間內。為了紅色點和綠色點的比例顯示更美觀均衡一些，我們需要給感染病例數使用另一套比例尺，防止出現感染人數比較少的國家不顯示紅點的現象。
寫好基礎的模型，只需要根據后端返回的數據傳進去進行動態渲染即可。
3、最后，
我們需要在整個模擬圖形canvas上加上一條線，模擬掃描的效果（產品的想法總是出人意料），可以用js來實現，當然用css3的transform和animate也是個很nice的選擇，畢竟通常能用css實現的功能還是優先選擇css，輕量高效。
內網網關問題，暫且未能提供源碼，有需要可聯系（qq:1006934861）或者留言。