Javascript Cytoscape.js锯齿状边缘

Javascript Cytoscape.js锯齿状边缘,javascript,css,graph,cytoscape.js,cytoscape,Javascript,Css,Graph,Cytoscape.js,Cytoscape,我试图在cytoscape.js中创建一个类似之字形的边。我已经在github上找到了,但是我想它还没有实现或者已经被放弃了,所以我正在尝试计算点,但是我遇到了一些麻烦。 我的图表如下所示: 我假设这里有3个案例。一种情况是源位于目标的左侧,另一种情况是源和目标具有相同的x值,第三种情况是源位于目标的右侧 第二种情况是基本情况,我已经计算了它(从源到目标的直线),但是我在计算其他两种情况时遇到了问题 我试图使边缘看起来像这样: 我正在使用以下函数尝试计算它们: cy.elements('edg

我试图在cytoscape.js中创建一个类似之字形的边。我已经在github上找到了,但是我想它还没有实现或者已经被放弃了,所以我正在尝试计算点,但是我遇到了一些麻烦。 我的图表如下所示:

我假设这里有3个案例。一种情况是源位于目标的左侧,另一种情况是源和目标具有相同的x值,第三种情况是源位于目标的右侧

第二种情况是基本情况,我已经计算了它(从源到目标的直线),但是我在计算其他两种情况时遇到了问题

我试图使边缘看起来像这样:

我正在使用以下函数尝试计算它们:

cy.elements('edge').css({'segment-distances': 

function(ele){
    var target = ele.target();
    var source = ele.source();
    var source_id = source.data().id;
    var target_id = target.data().id;
    var sou_pos_x = (cy.$('#' + source_id).position('x'));
    var tar_pos_x = (cy.$('#' + target_id).position('x'));
    var sou_pos_y = (cy.$('#' + source_id).position('y'));
    var tar_pos_y = (cy.$('#' + target_id).position('y'));
    var sou_tar_distance_x = (sou_pos_x - tar_pos_x);
    var sou_tar_distance_y = (sou_pos_y - tar_pos_y);

    // source on the left of the target
    if (sou_pos_x < tar_pos_x){
        return 0;
    }
    // source on same position as target
    else if (sou_pos_x == tar_pos_x){
        return 0;
    }
    // source on the right of the target
    else{
        return 0;
    }
}
});
因此,现在所有边都从同一位置开始和结束,这将简化计算

编辑2:

这已经由like实现

'source-endpoint': '180deg',
'target-endpoint': '0deg'