Circular layout in VivaGraphJS

问题

I'm using VivaGraphJS to create my graph which is dynamic and keeps on updating as he data comes in. The problem is that VivaGraph doesn't have the circular layout by default which I need.

I came across the circular layout in cytoscape.js which I'd like to port to VivaGraph. I'm not able to completely understand what changes to make so as to have a port to VivaGraph. It'll be really appreciated if you could help me and guide me through it. Thanks :)

Also, here's an algorithm that I need since the number of crosses don't matter to me.

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;
  }
}

回答1:

you can use the constant layout and calculate the positions of the circular layout by yourself. code example below,

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;
}

来源：https://stackoverflow.com/questions/18058806/circular-layout-in-vivagraphjs