1

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

1 回答 1

0

您可以使用常量布局并自己计算圆形布局的位置。下面的代码示例，

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;
}
于 2014-02-10T11:34:30.087 回答