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

力學圖的佈局中有很是多參數。本文將逐個說明。javascript

D3 中的力學圖佈局是使用韋爾萊積分法計算的。這是一種用於求解牛頓運動方程的數值方法,被普遍應用於分子動力學模擬以及視頻遊戲中。java

定義佈局的代碼例如如下:函數

var force = d3.layout.force()

就能夠。D3 中提供了 17 個函數用於設定其參數和事件。在所有佈局中是最多的,如下將對其進行說明。佈局


size()

用於設定力學圖的做用範圍。用法爲 force.size( [ x , y ] ),這個函數用於指定兩件事:post

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

假設不指定,默以爲 [ 1 , 1 ] 。動畫


linkDistance()

指定結點鏈接線的距離,默以爲20。假設距離是一個常數。那麼各鏈接線的長度老是固定的;假設是一個函數。那麼這個函數是做用於各鏈接線( source , target )的。spa


linkStrength()

指定鏈接線的堅硬度。值的範圍爲[ 0 , 1 ]。值越大越堅硬。.net

其直觀感覺是:code

  • 值爲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)

謝謝閱讀。


文檔信息

相關文章
相關標籤/搜索