力導(dǎo)向 (Force-directed) 布局算法繪圖(布點)的簡單實現(xiàn)

描述

本文簡要介紹力導(dǎo)向算法的原理,提供了源碼和D3繪制的實驗結(jié)果圖近零。

Force-Directed Layout algorithms are graph drawing algorithms based only on information contained within the structure of the graph itself rather than relying on contextual information.

力導(dǎo)向布局算法是一類繪圖算法抄肖,它僅僅基于圖的解構(gòu)本身來繪圖漓摩,而不依賴于上下文信息。

力導(dǎo)向繪圖 (Force-directed graph drawing)可以用于描述關(guān)系圖的結(jié)點之間的關(guān)系腿椎,把結(jié)點分布到畫布上合理的位置,比如描述企業(yè)之間的關(guān)系铆隘,社交網(wǎng)絡(luò)中的人際關(guān)系等南用。

原理

斥力(Repulsive Force)

把每個節(jié)點看做一個電荷,電荷與電荷之間存在斥力肿嘲,也就是庫侖力筑公,根據(jù)庫侖定律( Coulomb's law)十酣,電子之間的斥力可以這么計算:

Coulomb's law

假設(shè)每個電子的電量都是1际长,那就有:

F = k/r2.

常數(shù)k可以根據(jù)畫布大小和電子數(shù)量計算工育。
由于需要更新x,y坐標(biāo),可以分別計算斥力產(chǎn)生的正向位移嘱朽。

displacementX =  distX / dist * k * k / dist * ejectFactor

*關(guān)于計算x, y偏移和常數(shù)k的方式怔接,可能并沒有特別明確的方式,這里可能并不是最優(yōu)的方法岸军。

引力(Traction Force)

一些粒子之間被一些邊所牽連瓦侮,這些邊產(chǎn)生類似彈簧的胡克引力:

Fs=ks(x?x0)

牽制著邊兩端的粒子肚吏。斥力和引力不斷作用,粒子在不斷位移之后趨于平衡党觅,逐漸不再發(fā)生相對位移,能量不斷消耗掷伙,最終趨于零又兵。

在引力和斥力地作用下不斷地更新坐標(biāo),經(jīng)過多次迭代達(dá)到一個穩(wěn)定狀態(tài)宙地,收斂結(jié)束逆皮。參數(shù)和迭代次數(shù)需要調(diào)試。

我分別用Java和JavaScript簡單實現(xiàn)了這個算法秽梅,并且利用D3做圖形化展示剿牺,下面是一些跑出來的數(shù)據(jù)呈現(xiàn)出的分布圖:

用Java和JavaScript簡單實現(xiàn)了這個算法晒来,一些數(shù)據(jù)分布如下:

Graph 1. Iteration simulation of 24 nodes.
Graph 2. Randomly generated 20 nodes, each having 1~7 links.
Graph 3. Simulation of 100 nodes, iterating for 200 times.

代碼

代碼在我的Github上荧降。


Refs:
https://www.ibm.com/developerworks/cn/web/0909_fudl_flashsocial/#major3
https://blog.csdn.net/newworld123made/article/details/51443603
http://philogb.github.io/blog/2009/09/30/force-directed-layouts/
https://bl.ocks.org/mbostock/4557698

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末朵诫,一起剝皮案震驚了整個濱河市薄扁,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌随夸,老刑警劉巖震放,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件殿遂,死亡現(xiàn)場離奇詭異乙各,居然都是意外死亡幢竹,警方通過查閱死者的電腦和手機焕毫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來循签,“玉大人疙咸,你說我怎么就攤上這事∑虻” “怎么了?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵题山,是天一觀的道長兰粉。 經(jīng)常有香客問我,道長臀蛛,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任崖蜜,我火速辦了婚禮浊仆,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘豫领。我一直安慰自己抡柿,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布等恐。 她就那樣靜靜地躺著,像睡著了一般课蔬。 火紅的嫁衣襯著肌膚如雪囱稽。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天二跋,我揣著相機與錄音战惊,去河邊找鬼。 笑死扎即,一個胖子當(dāng)著我的面吹牛吞获,可吹牛的內(nèi)容都是我干的况凉。 我是一名探鬼主播,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼各拷,長吁一口氣:“原來是場噩夢啊……” “哼刁绒!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起烤黍,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤知市,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后蚊荣,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體初狰,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年互例,在試婚紗的時候發(fā)現(xiàn)自己被綠了奢入。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡媳叨,死狀恐怖腥光,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情糊秆,我是刑警寧澤武福,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站痘番,受9級特大地震影響捉片,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜汞舱,卻給世界環(huán)境...
    茶點故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一伍纫、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧昂芜,春花似錦莹规、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至欢际,卻和暖如春母市,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背损趋。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工窒篱, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓墙杯,卻偏偏與公主長得像配并,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子高镐,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,472評論 2 348

推薦閱讀更多精彩內(nèi)容

  • D3.js里面有個force類可以實現(xiàn)對網(wǎng)絡(luò)拓?fù)鋱D的繪畫嫉髓,其根本基礎(chǔ)是基于力導(dǎo)向算法來實現(xiàn)的观腊。相關(guān)API信息如下:...
    bobcorbett閱讀 4,000評論 1 3
  • 2017年5月8日 一、背景 力導(dǎo)向圖非常適合于渲染關(guān)系型信息圖算行。 二梧油、什么是力導(dǎo)向圖(Force-directe...
    HeyDelilah閱讀 21,152評論 3 9
  • 今天魚仔不想讀經(jīng)典,也不想去學(xué)跳舞州邢,但還是堅持下來儡陨!引導(dǎo)真的好重要,人總是會有放棄的時候量淌,但跨過去就好了骗村!從小就是...
    miracleyiu閱讀 147評論 0 0
  • 小寶兒,昨晚發(fā)燒了呀枢,可把我急壞了胚股,我騎著車子就往外跑,他爸喊我“回來裙秋,吃了飯再去”琅拌,我不聽“我不,我不去藥店就關(guān)...
    王爺有酒閱讀 291評論 0 1
  • 音頻:unit 08 unit 10 兒歌:泛聽 retell 1.Allen, let's watch the ...
    DS鑫花璐放閱讀 331評論 0 0