VivaGraphJS 中的圆形布局答案

【问题标题】：Circular layout in VivaGraphJSVivaGraphJS 中的圆形布局
【发布时间】：2013-08-06 04:45:18
【问题描述】：

我正在使用VivaGraphJS 创建我的图表，该图表是动态的，并在数据进入时不断更新。问题是VivaGraph 默认情况下没有我需要的圆形布局。

我在cytoscape.js 中遇到了circular layout，我想将其移植到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;
  }
}

【问题讨论】：

标签： javascript layout graph graph-visualization

【解决方案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;
}

【讨论】：