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

VivaGraphJS中的圆形布局

1 个答案: