VivaGraphJS中的圆形布局 [英] Circular layout in VivaGraphJS

问题描述

我使用 VivaGraphJS 来创建我的图形，这是动态的，并且在数据出现时不断更新问题是 VivaGraph 默认情况下没有我需要的圆形布局。

我遇到过 cytoscape.js 中的 =nofollow>圆形布局喜欢移植到VivaGraph。我无法完全理解要做出哪些更改，以便拥有VivaGraph的端口。如果你能帮助我并引导我完成，那将会非常感激。感谢：）

另外，这里有一个我需要的算法，因为十字架的数量对我来说并不重要。

 函数CircularLayout（width，height）
 {
 this.width = width; 
 this.height = height; 
} 
 
 / ** 
 *在一个圆中均匀分布顶点。没有交叉减少。 
 * 
 * @param图形有效图形实例
 * / 
 CircularLayout.prototype.layout =函数（图形）
 {
 / *半径。 * / 
 var r = Math.min（this.width，this.height）/ 2; 
 
 / *从哪里开始圈子。 * / 
 var dx = this.width / 2; 
 var dy = this.height / 2; 
 
 / *计算该步骤，使顶点相等。 * / 
 var step = 2 * Math.PI / graph.vertexCount; 
 var t = 0; //开始于角度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; 
} 
} 
  

解决方案

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

  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）; 
} 
返回nodePositions; 
} 
  

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

解决方案

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

这篇关于VivaGraphJS中的圆形布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！