6月份的時候產品需求一直處于討論期，開發(fā)任務較輕，就開始研究系統(tǒng)中網絡節(jié)點拓撲圖在上千節(jié)點時卡死的問題。目前針對這塊的技術選型用的是sigma.js + linkurious.js，這兩個項目時間都有些久遠，但是由于我們業(yè)務性很強需要高度定制化，用這兩個庫是最方便直接的了。一般情況下，canvas對于千級節(jié)點全量渲染應該是沒問題的，但是涉及交互計算就完全無法操作了。這里有篇文章針對萬級節(jié)點渲染方案給了我很大的啟示萬級節(jié)點可視化全量渲染優(yōu)化探究
，這篇文章在節(jié)點渲染和D3.js力學計算布局的方案可以說是分析得很極致了，最大程度上優(yōu)化了渲染性能。

分析測試后發(fā)現(xiàn)，千級節(jié)點性能問題主要在三個方面，一是力學布局計算，二是對節(jié)點做拖拽、選中等操作時就卡死，三是渲染出圖慢。在渲染出圖方面，同樣量級的節(jié)點渲染在webgl的效率明顯更高，在上面那篇文章中也提到了。在交互操作方面，我這里測試了5000個節(jié)點的拖拽、選中、框選等功能，也是沒有問題的。在力學布局計算方面，也是考慮放入worker中計算，不至于系統(tǒng)卡頓，但是我們這里需要在計算完畢出圖后才能進行后面的操作，所以這里暫不把這部分納入庫中。綜上選擇了webgl作為渲染技術，由于webgl寫起來太底層，最終選擇threejs作為基礎庫來封裝。

系統(tǒng)需求上不僅需要對節(jié)點做操作，還需要對邊做獨立操作，目前開源的可視化庫大部分都是基于canvas2D的，并且節(jié)點和邊大都是綁定起來操作的，對邊獨立操作很少，所以就需要自己來造輪子了。threejs基礎庫對于圖形的交互封裝很少，都是通過Raycaster來實現(xiàn)圖形的拾取，然后通過EventDispatcher來進行事件傳遞。不過threejs有很多exmaple，節(jié)點和邊需要的操作大都能在里面找到相關文件，修改一下就可以直接拿來用了。

從學習webgl基礎，到熟悉threejs，再到實際開發(fā)庫，重構項目，歷時2個多月完成了新舊模塊替換，在保有原來功能的基礎上提供了更多的擴展接口，以前無法操作的數(shù)據量已可以快速渲染和操作。這個基于threejs的網絡節(jié)點拓撲圖庫network-graph倉庫地址：https://github.com/Youhandan/network-graph，具體的使用方法寫在readme里面，這是自己寫的第一個通用工具庫。

這里面有兩個難點，一個是邊粗細的問題，線寬無論設置多大，渲染出來都是1個像素點，在threejs的issure里最近也有了解決方案，具體也是將線變成三角形分割的圖形，以此來實現(xiàn)線寬變化，這里已經將源代碼實現(xiàn)方法包裝在庫里了。另一個是曲邊繪制，QuadraticBezierCurve曲線中controlPoint如何計算的問題，當兩點距離隨著拖拽變化時，曲度變化問題。再有就是項目中兩點見帶方向的多曲邊的解決方案，參照圖數(shù)據庫的可視化呈現(xiàn)方式，其中涉及到線性代數(shù)，圖形學的一些知識花費了較多的時間。