React + TypeScript 練習：中國歷史人物數據概覽

說在前面

以前有個想法，就是怎麼把歷史上有明確出生和死亡時間的人經過圖表展現他們的歷程，在這個歷程中可能會發現一些好玩的東西。再加上恰好沒怎麼用過 React，還有 TypeScript 最近比較火，那就練練手。 使用的數據均來自中國歷代人物傳記資料庫（CBDB），我篩選了其中有明確出生時間和死亡時間的人物數據。

這片記錄主要是分享個人一些實現思路，技術上倒沒什麼可分享的，畢竟是練手學習的東西。

具體思路

個人最初想法是隨着年份數值的增大，而後篩選存活的歷史人物，而後將他們以點的形式展現，點的多與少能從某種角度展現出經濟狀況和文化狀況的變化。在展現點時，最簡單的辦法是每一個點都是行內塊元素，雖然點的增多自動換行，可是有個問題就是若是前面的點中有人死亡了，那後面的點都會動，觀感不是很好，想着那就集中處理爲每個點分配一個座標，而後當該點死亡了，那就空出該點的位置，讓後面的點填補上。

個人實現思路是先放置最中間的節點，而後再放置兩側節點，以正方形的方式向四周展開。最中間的節點座標爲（0，0）節點的座標爲（x，y），實現思路爲假設正方形一邊的節點數爲n，那目前展現第m個的節點的索引值m是否大於n(n+2)，若是小於那就左右放點；若是大於那就先填充中間的點，再左右放點。具體實現以下：

• 若是m小於n(n+2)，那就diff=m-n*n，diff爲奇數，那x=Math.floor((n+2)/2)，不然x=-Math.floor((n+2)/2)，而後求y，用Math.floor((diff+1)/2)-1就能夠求出來；
• 若是m大於n(n+2)，那m對n求餘(reminder)，餘數爲 奇x=Math.floor(reminder/2)，餘數爲偶x=-Math.floor(reminder/2)，y爲Math.floor(m/(n+2))，須要特殊處理的是當reminder等於0，也就是整除的時候。

知道座標後，只須要在用橫縱座標乘上節點寬度（高度）與節點間距的和就是真實的top和left值，最核心的已經完成了。

以前只是一股腦的實現，而後在redux裏寫了不少action和state，最後發現真正須要全局使用的東西很少，最核心的值實際上是年份，歷史圖表中主體數據實際上是經過年份篩選後的結果。等後面有時間了，會精簡一些。

動畫的實現其實比較簡單，就是經過 requestAnimFrame 來實現，啓動動畫時，記錄一下動畫發生時間，下一次動畫時和比較一下，大於必定時間間隔，執行年份加一，這樣就能夠經過一個值來改變更畫速度了。

底部的進度條拖動實現思路是，當在遊標觸發 mousedown 或 touchstart 時，將一個全局變量 isMouseDown 設爲true，而後 window 上觸發 mousemove 或 touchmove 時，判斷 isMouseDown 爲 true 時，經過座標信息算出年份值，在觸發 redux 修改年份的 action，遊標的位置經過年份值計算得出。

說在後面

沒有貼出源碼的緣由是寫得比較亂，沒臉貼出來，後面整理一下會貼出來，但願不會被吐槽得太慘😄，還有目前使用的只是不多的一部分數據，所有數據太大了，只選了不多的一部分直接寫在 js 文件裏，後面有錢了🙂買個雲服務。

後面須要改進的地方：

• 不用 dom 了，太卡了，數據量稍微大些就很卡了，感受電腦在燃燒
• 添加節點大小調節功能
• 速度控制板和圖標統計信息能夠在滾動時固定在屏幕某個位置
• 節點顏色或透明度能夠隨着臨近死亡時間發生變化

最後貼出成品連接： 中國歷史人物數據概覽