VivaGraphJS中的圓形佈局

Question

我使用VivaGraphJS來創建我的圖形，它是動態的，並且在數據進入時不斷更新。問題是VivaGraph默認情況下沒有我需要的圓形佈局。

我碰到circular layout在cytoscape.js，我想移植到VivaGraph。我無法完全理解要做出哪些更改，以便擁有VivaGraph的端口。如果你能幫助我並引導我完成，那將會非常感激。謝謝:)

此外，這是我需要的算法，因爲十字架的數量對我無關緊要。

function CircularLayout(width, height) 
{ 
    this.width = width; 
    this.height = height; 
} 

/** 
* Spreads the vertices evenly in a circle. No cross reduction. 
* 
* @param graph A valid graph instance 
*/ 
CircularLayout.prototype.layout = function(graph) 
{ 
    /* Radius. */ 
    var r = Math.min(this.width, this.height)/2; 

    /* Where to start the circle. */ 
    var dx = this.width/2; 
    var dy = this.height/2; 

    /* Calculate the step so that the vertices are equally apart. */ 
    var step = 2*Math.PI/graph.vertexCount; 
    var t = 0; // Start at "angle" 0. 

    for (var i = 0; i<graph.vertices.length; i++) { 
    var v = graph.vertices[i]; 
    v.x = Math.round(r*Math.cos(t) + dx); 
    v.y = Math.round(r*Math.sin(t) + dy); 
    t = t + step; 
    } 
} 

Answer 1

您可以使用常量佈局並自行計算圓形佈局的位置。代碼示例如下，

var gen = new Viva.Graph.generator(); 
var graph = gen.balancedBinTree(5); 
var layout = Viva.Graph.Layout.constant(graph); 
var nodePositions = generateNodePositions(graph,200); 
layout.placeNode(function(node) { return nodePositions[node.id-1];}); 
renderer = Viva.Graph.View.renderer(graph,{ layout : layout }); 
renderer.run(); 
renderer.reset(); 
function generateNodePositions(graph,radius) { 
    var nodePositions=[]; 
    var n = graph.getNodesCount(); 
    for (var i=0; i<n; i++) { 
     var pos = { 
      x:radius*Math.cos(i*2*Math.PI/n), 
      y:radius*Math.sin(i*2*Math.PI/n) 
     } 
     nodePositions.push(pos); 
    } 
    return nodePositions; 
}