d3.force layout — reference

• d3.forceSimulation([nodes]):創造一個新的simulation。這個模型包含著一個nodes的數組，如果沒有指定，就會定義一個空的數組在裏頭，之後可以通過 simulation.nodes([nodes]) 再把nodes array 放入 。不同于之前的d3版本，這裏的simulator是自動開啓的。如果你希望能夠手動控制simulation，需要呼叫simulation.stop()來進行終止simulation 的運作，之後可以通過simulation.tick()再次呼叫。等同于給力進行了初始化。

• simulation.tick()：一個持續性刷新的 function 。對現在的圖表進行屬性的設定，繪圖的時候會從這裏得到預期的設定。沒有任何傳遞參數！它不會觸發 events，events 衹會在 simulation.restart() 的時候啓動。The natural number of ticks ⌈ log([alphaMin] / log(1 - [alphaDecay] ⌉; by default, this is 300

可以簡單理解成這就是一個畫圖時候會呼叫使用的 function，這個 function 可以進行一些初始化的設定。修改位置和速度的屬性。

• simulation.nodes([nodes])：設定 nodes 的資料 ， 會自動加上一些出事屬性如下圖。
  其中：
  • vx：x軸方向速度
  • vy：y軸方向速度
  • x：x軸當前坐標
  • y：y軸當前坐標
  • fx - the node’s fixed x-position
  • fy - the node’s fixed y-position

原始node的object.png

simulation過後的object.png

The position ⟨x,y⟩ and velocity ⟨vx,vy⟩ may be subsequently modified by forces and by the simulation 修改位置和速度要在force之後進行速度的初始是0，然後位置的初始是按照 [phyllotaxis arrangement] (http://bl.ocks.org/mbostock/11478058) 排列。

phyllotaxis .png

• simulation.alpha([alpha]) ：目前還不是很瞭解，衹是知道取值範圍在 [0,1] ， 有人解釋為熱力值，會是一個逐漸收斂的值，會慢慢降為0。如果取值為 0 的時候就會保持靜止。暫且理解為加速度的參數，部分blog是説冷卻係數。

• simulation.force(name[, force])：這個是用來設定力的屬性，告知力的名稱以及參數。
  範例如下是

var simulation = d3.forceSimulation(nodes)
    .force("charge", d3.forceManyBody())
    .force("link", d3.forceLink(links))
    .force("center", d3.forceCenter());

• link：d3.forceLink([links]) ：

  • link.links([links])：為給定的 links array 添加力的作用。回傳 distance 和 strength 給每一個link 。如果有對 links 進行修改，需要重新呼叫這個 method

    • source ： 來源
    • target ： 目標
    • index : 從 0 開始設定，索引的不同會導致 links 讀取 data 的方式不同。

  • link.id([id])：id 如果有指定回傳的值的話，就是依據指定的内容來找，如果沒有的話，就預設為 index 來檢索。
    ex：

function id(d) {
  return d.index;
}

var nodes = [
  {"id": "Alice"},
  {"id": "Bob"},
  {"id": "Carol"}
];
var links = [
  {"source": 0, "target": 1}, // Alice → Bob
  {"source": 1, "target": 2} // Bob → Carol
];

function id(d) {
  return d.id;
}

var nodes = [
  {"id": "Alice"},
  {"id": "Bob"},
  {"id": "Carol"}
];
var links = [
  {"source": "Alice", "target": "Bob"},
  {"source": "Bob", "target": "Carol"}
];

• linkStrength() ： 數值從0~1，控制綫的牽引力，
  如果說設定為1的時候，拉動某一個點，其它點也會跟著移動
  如果是設定為0的時候，拉動一個點，其它點會保持不動，綫會拉長。

  • link.distance()： return 一個值來設定長度，初始的預設為 30 .因爲js是物件導向程式，所以在 distance 的位置放置 function 也是沒有問題的。

  • link.iterations([iterations])：控制迭代的次數。

strength：0.png

strength：1.png

• simulation.find()：查找给定位置最近的节点。
  文件解釋：

Returns the node closest to the position ⟨x,y⟩ with the given search radius. If radius is not specified, it defaults to infinity. If there is no node within the search area, returns undefined.

x:400,y:0_findout點.png

• simulation.on(typenames, [listener]) ：添加和刪除監聽事件。V4 仅支持"tick"和"end"事件。
  這裏説一下end事件，end是指在 alpha < alphaMin 后觸發的内容。

end_event.png

• Centering：控制力的中心點，衹是對位置的修正，并不會修改到速度

  • d3.forceCenter([x, y])：設定力的中心點到給定的位置。
  • center.x([x])：设置中心的x-坐标。
  • center.y([y])：设置中心的y坐标。

• Collision：创建一个圆碰撞力，把 node 當成是圓，不再是一個點，計算兩個圓的圓心距離，等於 Collision 設定的圓心。

  • collide.radius([radius])：為 Collision 添加一個半徑
  • collide.strength([strength])：設定 Collision 的力的大小，範圍 [ 0，1 ] ，如果沒有指定的話，初始預設為 0.7。
  • collide.iterations([iterations])：設定迭代的次數，預設值為 1 ，越高的迭代次數意味著越高的電腦性能的消耗 。

沒有設定Collision.png

設定Collision半徑為30.png

• Many-Body：相互作用力，正值互相吸引，類似于引力，負值相互排斥，類似於電荷閒的互相排斥，defual strength is -30 。

  • d3.forceManyBody() ：建立一個相互作用力模型。

  • manyBody.strength([strength])：設定多體力的强度

  • manyBody.theta([theta]) ：設定Barnes–Hut approximation標準值，默認為 0.9

  • manyBody.distanceMin([distance]) / manyBody.distanceMax([distance]) ：設定最小值和最大值的 distance 。最小值默認為 1 ，避免兩個重叠？？ 最大值默認為無窮大。設定一個最大值可以提高性能，并且可以有效的讓佈局更加局部化。

初始-30.png

• Positioning：坐標軸方向的力。

  • d3.forceX([x]) / d3.forceY([y])：設定 x / y 軸方向的定位，產生那個方向的力。

  • x.strength([strength]) / y.strength([strength])：The strength determines how much to increment the node’s x / y -velocity。這個力決定的是軸綫方向上速度的大小。推薦值是 [ 0 ， 1 ]
    初始值是 0.1 。

  • x.x([x]) / y.y([y])：设置目标x / y -坐标。初始為 0 。？？？？

x_position_force.png

參考來源
https://github.com/tianxuzhang/d3.v4-API-Translation