6月份的時(shí)候產(chǎn)品需求一直處于討論期漠另，開(kāi)發(fā)任務(wù)較輕格嗅，就開(kāi)始研究系統(tǒng)中網(wǎng)絡(luò)節(jié)點(diǎn)拓?fù)鋱D在上千節(jié)點(diǎn)時(shí)卡死的問(wèn)題番挺。目前針對(duì)這塊的技術(shù)選型用的是sigma.js + linkurious.js，這兩個(gè)項(xiàng)目時(shí)間都有些久遠(yuǎn)屯掖，但是由于我們業(yè)務(wù)性很強(qiáng)需要高度定制化建芙，用這兩個(gè)庫(kù)是最方便直接的了。一般情況下懂扼，canvas對(duì)于千級(jí)節(jié)點(diǎn)全量渲染應(yīng)該是沒(méi)問(wèn)題的禁荸，但是涉及交互計(jì)算就完全無(wú)法操作了。這里有篇文章針對(duì)萬(wàn)級(jí)節(jié)點(diǎn)渲染方案給了我很大的啟示萬(wàn)級(jí)節(jié)點(diǎn)可視化全量渲染優(yōu)化探究
阀湿，這篇文章在節(jié)點(diǎn)渲染和D3.js力學(xué)計(jì)算布局的方案可以說(shuō)是分析得很極致了赶熟，最大程度上優(yōu)化了渲染性能。
分析測(cè)試后發(fā)現(xiàn)陷嘴，千級(jí)節(jié)點(diǎn)性能問(wèn)題主要在三個(gè)方面映砖，一是力學(xué)布局計(jì)算，二是對(duì)節(jié)點(diǎn)做拖拽灾挨、選中等操作時(shí)就卡死邑退，三是渲染出圖慢。在渲染出圖方面劳澄，同樣量級(jí)的節(jié)點(diǎn)渲染在webgl的效率明顯更高地技，在上面那篇文章中也提到了。在交互操作方面秒拔，我這里測(cè)試了5000個(gè)節(jié)點(diǎn)的拖拽莫矗、選中、框選等功能砂缩，也是沒(méi)有問(wèn)題的作谚。在力學(xué)布局計(jì)算方面，也是考慮放入worker中計(jì)算庵芭，不至于系統(tǒng)卡頓妹懒，但是我們這里需要在計(jì)算完畢出圖后才能進(jìn)行后面的操作，所以這里暫不把這部分納入庫(kù)中双吆。綜上選擇了webgl作為渲染技術(shù)眨唬，由于webgl寫(xiě)起來(lái)太底層滔悉，最終選擇threejs作為基礎(chǔ)庫(kù)來(lái)封裝。
系統(tǒng)需求上不僅需要對(duì)節(jié)點(diǎn)做操作单绑，還需要對(duì)邊做獨(dú)立操作回官，目前開(kāi)源的可視化庫(kù)大部分都是基于canvas2D的，并且節(jié)點(diǎn)和邊大都是綁定起來(lái)操作的搂橙，對(duì)邊獨(dú)立操作很少歉提，所以就需要自己來(lái)造輪子了。threejs基礎(chǔ)庫(kù)對(duì)于圖形的交互封裝很少区转，都是通過(guò)Raycaster來(lái)實(shí)現(xiàn)圖形的拾取苔巨，然后通過(guò)EventDispatcher來(lái)進(jìn)行事件傳遞。不過(guò)threejs有很多exmaple废离，節(jié)點(diǎn)和邊需要的操作大都能在里面找到相關(guān)文件侄泽，修改一下就可以直接拿來(lái)用了。
從學(xué)習(xí)webgl基礎(chǔ)蜻韭，到熟悉threejs悼尾，再到實(shí)際開(kāi)發(fā)庫(kù)，重構(gòu)項(xiàng)目肖方，歷時(shí)2個(gè)多月完成了新舊模塊替換闺魏，在保有原來(lái)功能的基礎(chǔ)上提供了更多的擴(kuò)展接口，以前無(wú)法操作的數(shù)據(jù)量已可以快速渲染和操作俯画。這個(gè)基于threejs的網(wǎng)絡(luò)節(jié)點(diǎn)拓?fù)鋱D庫(kù)network-graph倉(cāng)庫(kù)地址：https://github.com/Youhandan/network-graph析桥，具體的使用方法寫(xiě)在readme里面，這是自己寫(xiě)的第一個(gè)通用工具庫(kù)艰垂。
這里面有兩個(gè)難點(diǎn)泡仗，一個(gè)是邊粗細(xì)的問(wèn)題，線寬無(wú)論設(shè)置多大猜憎，渲染出來(lái)都是1個(gè)像素點(diǎn)娩怎，在threejs的issure里最近也有了解決方案，具體也是將線變成三角形分割的圖形拉宗，以此來(lái)實(shí)現(xiàn)線寬變化峦树，這里已經(jīng)將源代碼實(shí)現(xiàn)方法包裝在庫(kù)里了。另一個(gè)是曲邊繪制旦事，QuadraticBezierCurve曲線中controlPoint如何計(jì)算的問(wèn)題，當(dāng)兩點(diǎn)距離隨著拖拽變化時(shí)急灭，曲度變化問(wèn)題姐浮。再有就是項(xiàng)目中兩點(diǎn)見(jiàn)帶方向的多曲邊的解決方案，參照?qǐng)D數(shù)據(jù)庫(kù)的可視化呈現(xiàn)方式葬馋，其中涉及到線性代數(shù)卖鲤，圖形學(xué)的一些知識(shí)花費(fèi)了較多的時(shí)間肾扰。
