【 D3.js 進階系列 — 2.2 】 力學圖的參數

標籤：d3   layout   force   函數   參數   

力學圖的布局中有很多參數，本文將逐個說明。

D3 中的力學圖布局是使用韋爾萊積分法計算的，這是一種用於求解牛頓運動方程的數值方法，被廣泛應用於分子動力學類比以及視頻遊戲中。定義布局的代碼如下：

var force = d3.layout.force()

即可，D3 中提供了 17 個函數用於設定其參數和事件，在所有布局中是最多的，下面將對其進行說明。

size()

用於設定力學圖的作用範圍，使用方法為 force.size( [ x , y ] )，這個函數用於指定兩件事：

• 重力的重心位置為 ( x/2 , y/2 )
• 所有節點的初始位置限定為 [ 0 , x ] 和 [ 0 , y ] 之間（但並非之後也是如此）

如果不指定，預設為 [ 1 , 1 ] 。

linkDistance()

指定結點連接線的距離，預設為20。如果距離是一個常數，那麼各連接線的長度總是固定的；如果是一個函數，那麼這個函數是作用於各連接線（ source , target ）的。

linkStrength()

指定連接線的堅硬度，值的範圍為[ 0 , 1 ]，值越大越堅硬。其直觀感受是：

• 值為1，則拖動一個頂點A，與之相連的頂點會與A保持linkDistance設定的距離運動
• 值為0，則拖動一個頂點A，與之相連的頂點不會運動，連接線會被拉長

friction()

定義摩擦係數的函數，值的範圍為[ 0 , 1 ]，預設為0.9。但是這個值其實並非物理意義上的摩擦，其實其意義更接近速度隨時間產生的損耗，這個損耗是針對每一個頂點的。

• 值為1，則沒有速度的損耗。
• 值為0，則速度的損耗最大。

charge()

設定引力，是排斥還是吸引，預設值為-30。

• 值為+，則相互吸引，絕對值越大吸引力越大。
• 值為-，則相互排斥，絕對值越大排斥力越大。

chargeDistance()

設定引力的作用距離，超過這個距離，則沒有引力的作用。預設值為無窮大。

gravity()

以 size 函數設定的中心產生重力，各頂點都會向中心運動，預設值為0.1。也可以設定為0，則沒有重力的作用。

theta()

頂點數如果過多，計算的時間就會加大（O(n log n)）。theta 就是為了限制這個計算而存在的，預設值為0.8。這個值越小，就能把計算限制得越緊。

alpha()

設定動畫運動的時間，超過時間後運動就會停止。其實

• force.start() 即 alpha(0.1)
• force.stop() 即 alpha(0)

謝謝閱讀。

文檔資訊

• 著作權聲明：署名（BY）-非商業性（NC）-禁止演繹（ND）
• 發表日期：2014 年 11 月 08 日
• 更多內容：OUR D3.JS - 資料視覺效果專題站 和 CSDN個人部落格
• 備忘：本文發表於 OUR D3.JS ，轉載請註明出處，謝謝

【 D3.js 進階系列 — 2.2 】 力學圖的參數