Циркулярная компоновка в 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; 
}