Cytoscape.js像边

时间:2017-07-24 09:55:27

标签: javascript css graph cytoscape.js cytoscape

我正在尝试在cytoscape.js中创建一个类似锯齿的边缘。我在github上找到了zigzag edges,但我猜它还没有实现或被放弃了,所以我试图计算得分,但我遇到了一些麻烦。 我的图表如下所示:enter image description here

我认为这里有3个案例。一个是当源位于目标的左侧时,另一个是当源和目标具有相同的x值时,另一个是当源位于目标右侧时。

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

我想让边缘看起来像这样:

enter image description here

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

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

根据我从segments-edges的文件中读到的内容,我应该得到2分。

如果您可以为每个分段点指定坐标,则计算会更容易。按照现在的方式,很难计算垂直于从源到目标的线形成的值,因为这些值可能会根据源与目标节点的距离而变化

任何人都可以帮我解决这个问题,或者至少给我一个如何实现我想要的指导?我已经坚持这个问题很长一段时间了。

修改

我已添加:

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

所以现在所有边缘都从同一个位置开始和结束,这将简化计算。

0 个答案:

没有答案