7

我已經能夠使用Force Layout構建一個Force Directed Graph。大多數功能都能很好地工作,但我遇到的一個大問題是,在開始佈局時,它會在整個頁面(進出畫布邊界)時反彈到畫布上的位置。如何在D3中控制力指向圖的反彈條目?

我使用alpha來控制它嘗試,但它似乎沒有工作:

// Create a force layout and bind Nodes and Links 
    var force = d3.layout.force() 
     .charge(-1000) 
     .nodes(nodeSet) 
     .links(linkSet) 
     .size([width/8, height/10]) 
     .linkDistance(function(d) { if (width < height) { return width*1/3; } else { return height*1/3 } }) // Controls edge length 
     .on("tick", tick) 
     .alpha(-5) // <---------------- HERE 
     .start(); 

有誰知道如何正確地控制力量佈局進入其SVG畫布?

我不會介意圖形浮動並緩慢安定,但整個圖形的瘋狂反彈根本沒有吸引力。 http://bl.ocks.org/Guerino1/2879486enter link description here

感謝您可以提供任何幫助:

順便說一句,在Force Directed Graph例如可以在這裏找到!

+0

你有沒有找到這個問題的答案?我有同樣的問題。 – Braden

回答

2

我一直在考慮這個問題,這是我想出的解決方案。我使用nodejs離線運行強制佈局滴答並將生成的節點數據保存到json文件中。 我用它作爲佈局的新json文件。我不太確定它說實話更好。我希望聽到您找到的任何解決方案。

5

節點隨機位置初始化。從文檔:「如果你沒有手動初始化位置,強制佈局將隨機初始化它們,導致有些不可預知的行爲。」你可以在源代碼中看到它:

// initialize node position based on first neighbor 
function position(dimension, size) { 
    ... 
    return Math.random() * size; 

它們將在畫布邊界內,但它們可以被外力推到外面。你有很多的解決方案:

  1. 節點可以在畫布內部約束:http://bl.ocks.org/mbostock/1129492
  2. 嘗試更多的電荷強度和更短鏈接,或更多的摩擦,這樣的節點往往會反彈較少
  3. 您可以運行模擬沒有動畫的節點,只顯示最終結果http://bl.ocks.org/mbostock/1667139
  4. 可以初始化節點位置https://github.com/mbostock/d3/wiki/Force-Layout#wiki-nodes(但如果你把他們都在市中心,斥力將是巨大的圖表會爆炸仍然更多):

var n = nodes.length; nodes.forEach(function(d, i) { 
    d.x = d.y = width/n * i; }); 
+0

所有這些選項看起來都非常不確定,並且如果鏈接/關係的數量從任何一種渲染變爲另一種渲染,則不能保證能夠正常工作。我會遇到可視化鏈接爲零的情況,並且會出現其他帶有數千鏈接的極端情況(全部關閉一箇中心/焦點節點)。有關如何確保每個極端的一致圖形穩定性以及它們之間的一切的想法?謝謝。 –