gpt4 book ai didi

javascript - VivaGraphJS 中的圆形布局

转载 作者:行者123 更新时间:2023-11-28 08:58:48 27 4
gpt4 key购买 nike

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

我遇到了circular layoutcytoscape.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;
}
}

最佳答案

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

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

关于javascript - VivaGraphJS 中的圆形布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18058806/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com