Graphin是一款圖表分析軟件，軟件的功能注重在分析領(lǐng)域，可以幫助用戶對(duì)圖表中的數(shù)據(jù)進(jìn)行分析，了解每個(gè)數(shù)據(jù)背后代表的意義，知道每個(gè)數(shù)據(jù)的含義，方便用戶進(jìn)行后續(xù)的操作，軟件支持布局切換，根據(jù)需求的不同，得到的分析結(jié)果也不同，滿足不同場(chǎng)景的布局需求。

軟件介紹

Graphin取名意為Graph Insight(圖的分析洞察)，是一個(gè)基于G6封裝的React組件庫(kù)，專注在關(guān)系可視分析領(lǐng)域，簡(jiǎn)單高效，開箱即用。

軟件特色

數(shù)據(jù)驅(qū)動(dòng)

充分利用 React 框架特性，支持?jǐn)?shù)據(jù)到視圖的映射與變化

自動(dòng)布局

內(nèi)置豐富的布局，支持布局切換，滿足不同場(chǎng)景下的布局需求

分析探索

沉淀分析方法，內(nèi)置分析組件，專注關(guān)系可視分析領(lǐng)域

布局方式

通用布局

Graphin和G6的同學(xué)也在布局算法層投入大量的精力，針對(duì)圖分析場(chǎng)景做了大量的優(yōu)化工作，Graphin中包含諸如力導(dǎo)布局、圓形布局、同心圓布局、網(wǎng)格布局、徑向布局、有向分層等布局算法。使開發(fā)者不再需要額外調(diào)整便能獲得一個(gè)不錯(cuò)的布局效果，從而增強(qiáng)圖的可讀性。

大圖布局

在某些特定分析場(chǎng)景下，需要在畫布上繪制的點(diǎn)/邊數(shù)量較多。而像力導(dǎo)布局每次迭代的所消耗的計(jì)算資源也會(huì)增大進(jìn)而阻塞JS線程使圖的繪制幀率很低，導(dǎo)致頁(yè)面卡頓， 即大圖布局問題。Graphin采用Web Worker與補(bǔ)間動(dòng)畫結(jié)合的技術(shù)，把計(jì)算量較大力導(dǎo)的迭代過程遷移到Web worker中進(jìn)行, 使在點(diǎn)邊數(shù)量較多的場(chǎng)景下也能保證頁(yè)面的順滑。下圖呈現(xiàn)的是400個(gè)節(jié)點(diǎn)，800條邊的場(chǎng)景下圖的繪制情況。當(dāng)然大圖布局的優(yōu)化策略也可以寫一篇文章了，這里不再深入，先留個(gè)坑位。

子圖布局

如果圖中節(jié)點(diǎn)有明顯的分類，或者用戶需要針對(duì)圖中特定節(jié)點(diǎn)進(jìn)行下一步分析，可以采用子圖布局的方式對(duì)該部分節(jié)點(diǎn)進(jìn)行重新布局，選擇合適的布局算法進(jìn)一步增強(qiáng)圖的可讀性。下圖中你可以看到存在兩個(gè)子圖分別采用了Circle布局和Radial布局來呈現(xiàn)，布局結(jié)果清晰明了，圖的可讀性非常強(qiáng)。

更新日志

在初始化流程，新增initState，能夠讓數(shù)據(jù)有一個(gè)初始化的狀態(tài)

JSON shema的描述注冊(cè)節(jié)點(diǎn)，新增update 方法

為了提高fit view的效率 取邊上4個(gè)點(diǎn)去進(jìn)行第一次的fit view