> [Wiki](Home) ? [[API--中文手冊]] ? [[布局]] ? **力布局**
* 如發現翻譯不當或有其他問題可以通過以下方式聯系譯者:
* 郵箱：zhang_tianxu@sina.com
* QQ群：[D3數據可視化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374，[大數據可視化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115
一個靈活的力導向圖布局實現使用位置Verlet整合算法允許簡單地控制。有關物理模擬的更多信息，請參見Thomas Jakobsen。這個實例是利用四叉樹加速電荷相互作用使用Barnes–Hut approximation。除了電荷charge力，pseudo-gravity力保持節點中心在可見區域并且避免排出斷開子圖，當鏈接的固定距離的幾何約束時。額外的自定義力和約束可應用于"tick" 事件,簡單地通過更新節點的x和y屬性。
http://bl.ocks.org/mbostock/4062045
一些例子：
? divergent forces：http://bl.ocks.org/mbostock/1021841
? multiple foci：http://bl.ocks.org/mbostock/1021953
? graph constructor：http://bl.ocks.org/mbostock/929623
? force-directed tree：http://bl.ocks.org/mbostock/1062288
? force-directed symbols：http://bl.ocks.org/mbostock/1062383
? force-directed images and labels：http://bl.ocks.org/mbostock/950642
? force-directed states：http://bl.ocks.org/mbostock/1073373
? sticky force layout：http://bl.ocks.org/mbostock/3750558
像D3的其他類，布局遵循方法鏈模式setter方法返回布局自身。允許使用一個簡單的聲明調用多個setter方法。有別于其他的布局實現是無狀態的。力導向圖布局 內部保持關聯節點和鏈接的引用。因此，一個給定的力導向圖布局實例只可以和一個單一的數據集一起使用。
# d3.layout.force()
構造一個新的力導向布局使用默認設置：尺寸 1×1，鏈接長度1，摩擦0.9，距離20，充電強度-30，重力強度0.1和θ參數0.8。默認的節點和鏈接是空數組，并且當布局開始時，內部的α冷卻參數被設置成0.1。構建力導向圖布局的通用模式是所有配置屬性, 然后調用開始start函數：
var force = d3.layout.force()
.nodes(nodes)
.links(links)
.size([w, h])
.linkStrength(0.1)
.friction(0.9)
.distance(20)
.charge(-30)
.gravity(0.1)
.theta(0.8)
.alpha(0.1)
.start();
需要注意的是, 像D3的其他布局，力導向圖布局不要求特定的可視化表現。最常見的，節點被映射到SVG圓形元素，鏈接被映射為SVG線元素。但你也可以顯示節點作為符號或圖片。.
顯示為符號的案例：http://bl.ocks.org/mbostock/1062383
顯示為圖片的案例：http://bl.ocks.org/mbostock/950642
# force.size([size])
如果指定了size，設置可用的布局大小為指定的代表x和y的兩元素數字數組來。如果未指定size，返回當前size，默認為1×1。size影響力導向圖的兩個方面：重力中心和初始的隨機位置。重心是 [ x / 2, y / 2 ]。當節點被添加到力導向圖布局，如果不具有已設置的x和y屬性，然后這些屬性都分別使用范圍為[0, x]和[0, y]的均勻隨機分布進行初始化。
# force.linkDistance([distance])
如果指定了distance ，設定鏈接節點間的目標距離為指定的值。如果未指定distance ，返回布局的當前鏈路距離，默認為20。如果distance 是常量，那么所有的鏈接是相同的距離。否則，如果距離是一個函數，則該函數為每個鏈接（按順序）求值，被傳遞參數是鏈接和它的索引，用this上下文作為力導向圖布局；該函數的返回值被用來設置每個鏈接距離。當布局開始時該函數被求值。通常, 距離被指定以像素為單位; 然而，這些單位也可以是相對于布局的size.
鏈接不實現為在一般力導向圖布局中的"彈性力"，而是弱幾何約束。對于布局的每一個tick，計算每對鏈接節點之間的距離并與目標距離進行比較；鏈接隨后朝向彼此移動或遠離彼此，以收斂到所需的距離。這種在Verlet 集成算法之上約束松弛的方法大大穩定于之前使用彈性力的方法，并且還允許在Tick事件監聽器靈活實現其他約束，如層次分層。
# force.linkStrength([strength])
如果指定了strength ，設置鏈接間強度（剛性）為[0,1]范圍內的指定的值。如果strength 未被指定，返回布局的當前鏈接強度，默認為1。如果強度是一個常數，那么各個鏈接都有相同的強度。否則，如果強度是一個函數，那么該函數為每一個鏈接（按順序）求值，傳遞的參數是鏈接和它的索引，this 上下文是這個力布局；該函數的返回值隨后被用來設置每個鏈接的強度。每當布局開始時調用這個函數。
# force.friction([friction])
如果指定了friction ，設定摩擦系數為指定的值。如果摩擦系數未被指定，返回當前系數，默認為0.9。這個參數的名稱可能有誤導性的；它不對應標準物理的摩擦系數。相反，它更接近速度衰減：在模擬的每個tick，粒子速度通過指定的friction縮減。因此，值1對應于無摩擦的環境中，而一個0值凍結所有顆粒就位。超出范圍的值[0,1]不推薦，可能有破壞穩定的的影響。
# force.charge([charge])
如果指定電荷強度charge ，設置電荷強度charge 為指定的值。如果電荷強度charge 未被指定，返回電流電荷強度，其默認值為-30。如果電荷強是常量，那么所有節點都具有相同的電荷。否則，如果電荷強度是一個函數，則該函數為每個節點（按順序）求值，傳遞的參數是節點和它的索引，this上下文作為力布局；該函數的返回值被用于設置每個節點的電荷強度。每當布局開始時被調用。.
負值導致節點排斥，而正值導致節點吸引。對于圖形布局，應使用負值；對于N體模擬，可以使用正值。所有節點都假定為無窮遠的小點具有相等電荷和質量。電荷力是通過Barnes–Hut算法高效實現的，為每個tick計算四叉樹。電荷力設置為零禁用四叉樹，它可以顯著提高性能，如果你不需要N體模擬。
Barnes–Hut算法：http://arborjs.org/docs/barnes-hut
# force.chargeDistance([distance])
如果distance 被指定，設置電荷強度已經應用的最大距離。如果distance 未被指定，返回當前最大電荷距離，默認為無窮大。指定一個有限電荷距離提高力導向圖的性能和產生更本地化的布局。限定距離的電荷力是尤其有用當合自定義重力一起使用時。有關示例, 請參閱“Constellations of Directors and their Stars” (The New York Times).
限定距離的電荷力：http://www.nytimes.com/newsgraphics/2013/09/07/director-star-chart/
# force.theta([theta])
為了避免大圖的二次性能下降。力導向圖布局使用Barnes–Hut逼近，每個tick花費O(n log n)。對于每一個tick，創建一個四叉樹用于存儲當前節點的位置；然后，對每個節點，計算給定節點的所有其他節點的總電荷力。為了聚集過遠的節點，通過處理節點的距離的簇作為單個逼近電荷力。Theta 確定計算精度：對一個節點到塊象限中心的距離，四叉樹中象限區域的比率小于theta，在給定象限的所有節點被視為一個單一的，大的節點，而不是單獨地計算。
Barnes–Hut近似：http://en.wikipedia.org/wiki/Barnes-Hut_simulation
# force.gravity([gravity])
如果指定了重力gravity ，設置引力強度為指定的值。如果未指定重力，返回當前的引力強度，默認為0.1。這個參數的名稱可能是誤導性的：它不對應于物理重力gravity（可以用一個正電荷參數進行仿真)。相反，重力被實現為類似于虛擬彈力的每個節點連接到布局尺寸的中心的弱幾何約束。這種方法具有很好的特性：靠近布局的中心，引力強度幾乎為零，避免了布局的任何局部變形；當節點將被推遠離中心，引力強度與距離成線性比例變強。因此，重力總是會某個閾值克服斥力電荷勢力，以防止斷開連接的節點逃逸出布局。
重力可以通過設置引力強度為0來禁止。如果禁用重力，建議你實現一些其他的幾何約束，以防止逃逸布局，如在布局的范圍內制約它們的節點。
# force.nodes([nodes])
如果節點nodes 被指定，設置布局的相關節點為指定的nodes 數組。如果未指定節點nodes ，則返回當前數組，默認為空數組。每個節點具有以下屬性：
? index - nodes 數組節點的索引（從零開始）。
? x -當前節點的x坐標位置。
? y -當前節點的位置y坐標。
? px -前一個節點位置的x坐標。
? py -前一個節點位置的y坐標。
? fixed -一個布爾值，表示節點位置是否被鎖定。
? weight -節點權重；相關聯的鏈接的數目。
這些屬性不必在傳遞節點給布局之前進行設置；如果他們都沒有設置，合適的默認值將在布局進行初始化start時調用，但是，要知道，如果你的節點上存儲有其他數據，你的數據屬性不應該與上面使用的布局屬性沖突。
# force.links([links])
如果指定了鏈接links ，設置布局的相關鏈接為指定的links 數組。如果沒有指定鏈接links 時，返回當前數組，默認為空數組。每個鏈接都有以下屬性：
? source - 源節點（節點中的元素）。.
? target - 目標節點（節點中的元素）。
注意：在源和目標屬性的值可初始化為nodes 數組的索引；這些將被替換為調用開始函數之后的引用。鏈接對象可能有你指定的其他字段，這個數據可以用來計算鏈接強度strength和距離distance，基于每個連接的基礎使用一個訪問函數
# force.start()
啟動模擬；當首次創建布局時此方法必須被調用，然后分配節點和鏈接。此外，每當節點或鏈接發生變化它應當再次調用。在內部，布局使用冷卻參數alpha控制布局的溫度：當物理模擬收斂為穩定的布局，溫度就下降，造成節點移動速度比較慢。最終，alpha下降到低于閾值，模擬完全停止，釋放CPU資源，避免電池電量的消耗。布局可以使用恢復或重新啟動重新加熱；使用拖曳的行為時，會自動出現這種情況。
在開始時，布局初始化相關節點上的各種屬性。每個節點的索引是通過遍歷數組，從零開始計算。初始的x和y坐標，如果尚未在外部設置為以有效的數字，通過檢測相鄰節點計算：如果鏈接的節點已經在x或y的初始位置時，相應的坐標被施加到新節點。這當新節點被添加時增加圖形布局的穩定性，而不是使用默認值（在布局的尺寸之內隨機初始化位置）。前一px和py位置設置為初始位置，如果尚未設置，給新節點一個零初始速度。最后，固定布爾默認為false。
布局還在相關鏈接上初始化源source 和目標target 屬性：為方便起見，這些屬性可以被指定為一個數字索引，而不是直接的鏈接，使得節點和鏈接可以從JSON文件或其他靜態的描述中讀取。如果這些屬性是數字，導入鏈接的源和目標屬性僅替換為nodes 中相應的實體；因此，現有鏈接中的這些屬性當布局被重新啟動時不受影響。鏈接距離distances和強度strengths也在開始時重新計算 .
# force.alpha([value])
獲取或設置力布局的冷卻參數：alpha。如果值value 已指定，設置alpha為指定的值并返回力布局。如果值大于零，這個方法也將重新啟動力布局（如果它尚未運行），分發一個“啟動”事件啟用節拍定時器。如果值為非正，且力布局正在運行，這個方法將在下一個tick停止力布局并分派“結束”事件。如果未指定值，則該方法返回當前alpha值。
# force.resume()
相當于：
force.alpha(.1);
設置冷卻參數alpha為0.1。此方法設置內部的alpha參數設置為0.1，然后重新啟動定時器。 通常情況下，你不需要直接調用此方法；它是通過start自動調用。它也可以通過拖動動作drag自動調用。
# force.stop()
Equivalent to:
force.alpha(0);
Terminates the simulation, setting the cooling parameter alpha to zero. This can be used to stop the simulation explicitly, for example, if you want to show animation or allow other interaction. If you do not stop the layout explicitly, it will still stop automatically after the layout's cooling parameter decays below some threshold.
相當于:
force.alpha(0);
終止模擬，冷卻參數alpha設定為零。這可以用來顯式地停止模擬，例如，如果你要展示的動畫或允許其他的互動。如果你沒有明確停止布局，它仍然會自動在布局的冷卻參數衰變后低于某個閾值后停止。
# force.tick()
執行力布局仿真一步。這種方法可以在配合使用start and stop來計算靜態布局。例如：
force.start();
for (var i = 0; i < n; ++i) force.tick();
force.stop();
迭代次數取決于圖形的大小和復雜性。初始位置的選擇也可以對如何快速將圖形收斂于一個很好的解產生顯著影響。例如，下面的節點沿對角線排列：
var n = nodes.length;
nodes.forEach(function(d, i) {
d.x = d.y = width / n * i;
});
如果不手動初始化位置，力布局將它們隨機初始化，導致有些不可預知的行為。
# force.on(type, listener)
注冊指定的監聽器listener 為力布局指定類型的事件。目前，僅支持"start"，"tick"和"end"事件。"tick"事件將被指派為模擬的每個tick。監聽節拍事件來更新節點和鏈接的顯示位置。例如，如果你最初顯示的節點和鏈接，象這樣：
var link = vis.selectAll("line")
.data(links)
.enter().append("line");
var node = vis.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", 5);
You can set their positions on tick:
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
您可以在tick設置他們的位置:
在這個案例中，我們已經存儲選擇的node和link在初始化中，這樣我們就不需要重新選擇每個節點的tick。如果你愿意，你可以不同地顯示節點和鏈接；例如，您可以使用符號而不是圓形。
當模擬內部的alpha冷卻參數達到零，"end"事件就被調度。
# force.drag()
綁定一個行為允許交互式拖動到節點，無論是使用鼠標或觸摸。和節點中的call操作符一起使用；例如，初始化時調用node.call(force.drag)。拖動事件在鼠標滑過時設置節點的固定屬性，這樣，只要鼠標移動到某個節點，它停止不動。鼠標滑過而不是鼠標按下時固定，使得它更容易捕捉移動節點。當接收到一個鼠標按下事件在每個后續的鼠標移動直到鼠標彈起，當前鼠標位置設置為節點的中心。此外，每個鼠標移動觸發一個力布局重新開始，再加熱模擬。如果你想拖拖之后節點保持固定，在頭動開始時設置fixed 屬性為true，如粘力布局的例子。
實現注意：在鼠標移動和鼠標彈起事件監聽器已注冊當前窗口上，這樣，當用戶開始拖動節點，他們可以繼續拖動節點，即使鼠標離開窗口。每個事件監聽器使用“force”命名空間，以避免和其他你可能想綁定到節點或窗體上的事件監聽器沖突。如果節點被拖動事件移除了，隨后的點擊事件將被抓獲到的最后一個鼠標抬起事件觸發，你可以忽略這些點擊和拖動通過查看是否默認的行為被阻止了。
selection.on("click", function(d) {
if (d3.event.defaultPrevented) return; // ignore drag
otherwiseDoAwesomeThing();
});
See the collapsible force layout and divergent forces for examples.
咕嚕譯 2014-11-30 20:37:37
