【问题标题】:Circle Layout node angles cytoscape圆形布局节点角度 cytoscape
【发布时间】:2021-12-14 01:15:11
【问题描述】:

如何使用圆形布局在 cytoscape 中获取每个节点与圆周中心的角度? 视觉示例:

【问题讨论】:

标签: javascript cytoscape.js


【解决方案1】:

第一步得到节点的角度,得到圆周的中心
所以我得到了第 3 个第一个节点的 3 个点来得到它:

AX= cy.nodes()[0]._private.position.x   
AY= cy.nodes()[0]._private.position.y   
BX= cy.nodes()[1]._private.position.x   
BY= cy.nodes()[1]._private.position.y   
CX= cy.nodes()[2]._private.position.x   
CY= cy.nodes()[2]._private.position.y   

var yDelta_a = BY - AY 
var xDelta_a = BX - AX; 
var yDelta_b = CY - BY; 
var xDelta_b = CX - BX;
var aSlope = yDelta_a / xDelta_a; 
var bSlope = yDelta_b / xDelta_b;

//Get center circumference
coordCentroCircunferenciaX = (aSlope*bSlope*(AY - CY) + bSlope*(AX + BX) - aSlope*(BX+CX) )/(2* (bSlope-aSlope) );
coordCentroCircunferenciaY = -1*(coordCentroCircunferenciaX- (AX+BX)/2)/aSlope +  (AY+BY)/2;     

然后遍历获得角度的节点:

for (i = 1;i< cy.nodes().length; i=i+1) { //starts nodes loop
    let nodo=cy.nodes()[i];
    array.push(nodo._private.data.name);

    //get the node position(x,y)
    nodox=nodo._private.position.x
    nodoy=nodo._private.position.y

现在有 3 个点:中心圆周、节点位置和 x 轴上的另一个点

C = { x: coordCentroCircunferenciaX, y: coordCentroCircunferenciaY };
A = { x: nodox, y: 0 };
B = { x: nodox,y:nodoy  };

然后我用这个函数得到角度:

function find_angle(A,B,C) {
    var AB = Math.sqrt(Math.pow(B.x-A.x,2)+ Math.pow(B.y-A.y,2));    
    var BC = Math.sqrt(Math.pow(B.x-C.x,2)+ Math.pow(B.y-C.y,2)); 
    var AC = Math.sqrt(Math.pow(C.x-A.x,2)+ Math.pow(C.y-A.y,2));
    return Math.acos((BC*BC+AB*AB-AC*AC)/(2*BC*AB))*(180/Math.PI);   
}

最后这是与圆周中心的角度:

let angulo=Math.round(find_angle(A,B,C))

所以用这个角度我可以得到旋转节点标签的效果:

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2023-03-08
    • 2018-04-23
    • 2014-02-09
    • 1970-01-01
    • 2011-05-13
    • 1970-01-01
    • 2016-01-06
    • 2023-04-08
    相关资源
    最近更新 更多