2015-09-04 69 views
4

我正在嘗試繪製一個vis.js網絡圖,並具有可加載和定位節點的功能。然後我希望物理被禁用,這樣節點可以被用戶移動。我已經嘗試過,但它不起作用。在節點加載後停止vis.js物理,但允許可拖動節點

var options = { 

    nodes: { 
     borderWidth:4, 
     size:60, 
     color: { 
     border: '#222222', 
     background: 'grey' 
     }, 
     font:{color:'black'} 
    }, 
    edges: { 
     arrows: { 
     to:  {enabled: false, scaleFactor:1}, 
     middle: {enabled: false, scaleFactor:1}, 
     from: {enabled: false, scaleFactor:1} 
     }, 
     color: 'black' 
    }, 

    { physics: enabled: false; }; 

有沒有人這樣做?如果是的話,你可以提供一個例子或建議,以最好的方式來實現這一點。我也讀過位於here的解釋,但不太熟悉java,我無法確定步驟。

感謝

回答

7

從vis.js開發者處獲得更多的工作和幫助之後,這裏是已完成的代碼,減去json數據和一些選項。訣竅是使用"stabilizationIterationsDone"事件並禁用物理功能:

// create a network 
var container = document.getElementById('mynetwork'); 
var data = { 
    nodes: nodes, 
    edges: edges 
}; 
var options = { 

    nodes: ..., 
    edges: ..., 

    physics: { 
     forceAtlas2Based: { 
      gravitationalConstant: -26, 
      centralGravity: 0.005, 
      springLength: 230, 
      springConstant: 0.18, 
      avoidOverlap: 1.5 
     }, 
     maxVelocity: 146, 
     solver: 'forceAtlas2Based', 
     timestep: 0.35, 
     stabilization: { 
      enabled: true, 
      iterations: 1000, 
      updateInterval: 25 
     } 
    } 
}; 

network = new vis.Network(container, data, options); 

network.on("stabilizationIterationsDone", function() { 
    network.setOptions({ physics: false }); 
}); 
+0

究竟應該在哪裏定義「stabilizationIterationsDone」? – NSP

2

我想你首先要讓網絡穩定,然後才禁用物理?在這種情況下,您可以使用啓用的physicsstabilization加載網絡。一旦節點穩定後,將觸發事件。然後,你可以通過network.setOptions

+0

非常感謝您的回覆。我已經在vis.js github網站上讀到了這個。我似乎無法得到正確的語法你會介意提供一個例子嗎? – Perry

1

我能想出解決辦法,現在的代碼看起來像這樣

// create a network 
var container = document.getElementById('mynetwork'); 
var data = { 
    nodes: nodes, 
    edges: edges 
}; 
var options = { 

    nodes: { 
     borderWidth:1, 
     size:45, 
     color: { 
     border: '#222222', 
     background: 'grey' 
     }, 
     font:{color:'black', 
     size: 11, 
     face :'arial', 
     }, 
    }, 

    edges: { 

     arrows: { 
      to:  {enabled: false, scaleFactor:1}, 
      middle: {enabled: false, scaleFactor:1}, 
      from: {enabled: false, scaleFactor:1} 
     }, 
     color: { 
      color:'#848484', 
      highlight:'#848484', 
      hover: '#848484', 
     }, 
     font: { 
      color: '#343434', 
      size: 11, // px 
      face: 'arial', 
      background: 'none', 
      strokeWidth: 5, // px 
      strokeColor: '#ffffff', 
      align:'vertical' 
     }, 
     smooth: { 
      enabled: false, //setting to true enables curved lines 
      //type: "dynamic", 
      //roundness: 0.5 
     }, 
    } 
}; 

network = new vis.Network(container, data, options); 
    network.setOptions({ 
      physics: {enabled:false} 
    }); 
} 

我不得不搬到了network.setOptions()如圖所示的新代碼禁用物理和它現在的工作如預期的。