在Cytoscape.js中拖动节点时,请使其他节点跟随

时间:2016-02-15 04:00:20

标签: javascript graph cytoscape.js

我是cytoscape.js的新手,我只想在拖动一个节点时让其他节点跟进。

感谢您的帮助

2 个答案:

答案 0 :(得分:0)

编写一个监听器,并在回调中正确更新其他节点位置:

答案 1 :(得分:0)

这就是我的做法。注意,必须在抓取事件中保存原始位置,然后在拖动事件中进行更新。

function add_drag_listeners()
{
    var all = cy.elements("node");
    for (j = 0; j < all.length; j++)
    {
        cynode = all[j];
        cynode.on("grab",handle_grab);
        cynode.on("drag",handle_drag);
    }
}
var grab_x = 0;
var grab_y = 0;
var drag_subgraph = [];
function handle_grab(evt)
{
    grab_x = this.position().x ;
    grab_y = this.position().y ;
    var succ = this.successors();
    drag_subgraph = [];
    var succstr = "";
    for (i = 0; i < succ.length; i++)
    {
        if (succ[i].isNode())
        {
            var old_x = succ[i].position().x;
            var old_y = succ[i].position().y;
            succstr += " " + succ[i].data("id");
            drag_subgraph.push({old_x:old_x, old_y:old_y, obj:succ[i]});
        }
    }
}
function handle_drag(evt)
{
    var new_x = this.position().x;
    var new_y = this.position().y;
    var delta_x = new_x - grab_x;
    var delta_y = new_y - grab_y;
    for (i = 0; i < drag_subgraph.length; i++)
    {
        var obj = drag_subgraph[i].obj;
        var old_x = drag_subgraph[i].old_x;
        var old_y = drag_subgraph[i].old_y;
        var new_x = old_x + delta_x;
        var new_y = old_y + delta_y;
        obj.position({x:new_x, y:new_y});
    }
}