根據尺寸收費 - d3版面佈局

Question

我正在嘗試使用d3.layout.force來製作一個有力的圖表，並且我需要容器可以調整大小 - 也就是說，我希望能夠根據以下內容計算適當的費用和linkDistance值：大小，還是有d3爲我做了一些神奇的方式。

我試過了（鏈接：http://jsfiddle.net/VHdUe/6/），它只使用節點。我將電荷設置爲一個基於節點數量的值，該節點將適合於它傾向於成形的圓的半徑。

的解決方案適用於一些中等大小的容器，但如果你點擊調整了幾下，你可以看到它並沒有真正爲各種規模的工作...

唯一的辦法我可以看到的是使用svg縮放轉換，這會使我的元素大小變得不利。任何其他選項？

PS：我看過http://mbostock.github.com/d3/talk/20110921/bounding.html（對D3 force directed layout with bounding box的回答），但我寧願有一個基於重力的解決方案，而不是邊界框。

Answer 1

除了charge和linkDistance，您還有gravity。如果您希望圖形保持與佈局大小相同的相對密度，那麼您將需要縮放電荷和重力。這些是確定blob總體大小的主要兩個計算力量。有關更多詳細信息，請參見my force layout talk。

我嘗試了幾種不同的版本，而這一次似乎工作得很好：

var k = Math.sqrt(nodes.length/(width * height)); 

layout 
    .charge(-10/k) 
    .gravity(100 * k) 

這裏nodes.length/(width * height)是線性正比於圖形密度：由佈局的區域劃分節點的區域。充電力遵循inverse-square law，這可以解釋爲什麼平方根很好地工作。 D3的「重力」是一個虛擬的彈簧，它隨着距佈局中心的距離線性縮放，因此當圖形變得更密時，這也會增加重力，並且阻止節點逃離邊界框。