D3力導向圖使用總結

前端開膛手發表於2018-11-02

一、simulation各項引數簡單介紹

this.simulation = d3
.forceSimulation()
.alphaDecay(0.03) //設定 alpha 衰減率.迭代150,預設0.0228
.alphaMin(0.005) //需要在 [0, 1] 之間。如果沒有指定 min 則返回當前的最小 alpha 值,預設為 0.001. 在模擬內部,會不斷的減小 alpha 值直到 alpha 值小於 最小 alpha。
.velocityDecay(0.2) //預設為 0.4,較低的衰減係數可以使得迭代次數更多,其佈局結果也會更理性,但是可能會引起數值不穩定從而導致震盪。
.force("link",d3.forceLink() //link froce(彈簧模型) 可以根據 link distance 將有關聯的兩個節點拉近或者推遠。力的強度與被連結兩個節點的距離成比例,類似彈簧力。
.id(d => d.pk) //設定或獲取link中節點的查詢方式 
.distance(radius * 5) //設定或獲取兩個節點之間的距離)//  
.force('charge', d3.forceManyBody())
.force("charge",d3.forceManyBody().strength(-250) //作用力應用在所用的節點之間,當strength為正的時候可以模擬重力,當為負的時候可以模擬電荷力。
.theta(0.9) //預設為 0.9.
.distanceMin(80) //設定或獲取最小連線距離              
.distanceMax(400) //設定或獲取最大連線距離)
.force("center", d3.forceCenter(this.width / 2, this.height / 2)) //centering作用力可以使得節點佈局開之後圍繞某個中心。
.force("collision",d3.forceCollide(radius + 4) //設定節點碰撞半徑>= 點半徑避免重疊
.strength(0.9) //則將碰撞強度設定為指定的數值,強度範圍為 [0, 1]。並返回當前碰撞力模型,預設0.7
.iterations(1) // iterations 則將每次應用碰撞檢測力模型時候的迭代次數設定為指定的數值。如果沒有指定 iterations 則返回當前的迭代次數,預設為 1。迭代次數越大,最終的佈局越優,但是會增加程式執行上的消耗。)
.on("end", () => {this.lastTock();});複製程式碼

//在d3力導向圖的拖放事件裡,常會用到alphaTarget屬性
拖放開始時,alphaTarget設定為比alphaMin更大的值,即會在拖放的過程中力導向圖持續運算(防止拖到一半結束的情況)
。
拖放結束時,alphaTarget設定為0,即在拖放結束後的一段時間內,力導向圖停止運算。複製程式碼

二、怎樣修改已經設定好的simulation

simulation
  .force("A", null)
  .force("B", null);複製程式碼

三、simulation的tick有"start"/"end"/"on"三種觸發事件,開發的時候卻經常被忽略


相關文章