Javascript 用Cytoscape扩展节点

我试图创建一个图形，当页面加载时，它会将图形中的所有节点从根节点向外展开，就像一棵树一样，就像。该图没有循环和预定义的根节点

现在，我隐藏了图形上的所有节点。然后从根节点运行DFS。在每个子节点上，我将其移动到父节点的位置，然后希望运行.animate（），并将其原始位置作为目标，以便生成平滑的动画。如代码所示，.animate（）函数不会暂停程序的其余部分。有什么建议吗

var cy=cytoscape({
容器：document.getElementById（'cy'），
boxSelectionEnabled:false，
自动取消选择：true，
样式：cytoscape.stylesheet（）
.selector（'节点'）
.css({
'内容'：'数据（id）'
})
.selector（'边'）
.css({
“曲线样式”：“bezier”，
'目标箭头形状'：'三角形'，
“宽度”：4，
“线条颜色”：“ddd”，
“目标箭头颜色”：“ddd”，
}),
要素：{
节点：[
{data:{id:'a'}}，
{数据：{id:'b'}}，
{data:{id:'c'}}，
{data:{id:'d'}}，
{数据：{id:'e'}}
],
边缘：[
{数据：{id:'ae'，权重：1，源：'a'，目标：'e'}，
{数据：{id:'ab'，权重：3，源：'a'，目标：'b'}，
{数据：{id:'bc'，权重：5，源：'b'，目标：'c'}，
{数据：{id:'cd'，权重：2，源：'c'，目标：'d'}，
]
},
布局：{
名称：“面包第一”，
导演：是的，
填充：10，
根：“#a”，
}
}); // 赛因特
var root_id='a'
//扎根
var root=cy.$（'#'+root_id）[0]
//空集合
var collection=cy.collection（）
//隐藏除根节点以外的所有节点
cy.ready（功能（事件）{
collection=collection.add（cy.nodes（'node[id！=“'+root_id+”））
collection=collection.add（cy.nodes（）.connectedges（））；
collection.style（'可见性'，'隐藏'）
});
var_节点=[root]；
函数dfs（节点）{
//访问节点
已访问\u节点。推送（节点）
//对于每个相邻的w ov f
邻居=cy.$（'#'+node.id（））.outgoers（'edge'））
forEach（函数（下一个）{
var next_node=cy.$（'#'+next.data（）.target）
if（已访问的\u节点。indexOf（下一个\u节点）<0）{
//访问每个未访问的节点
//我们将目标节点移动到源节点，然后使用.animate（）将目标节点移回其原始位置
source\u id=next.data（'source'）
target\u id=next.data（'target'）
var node_to_move=cy.$（“#”+next.data（'target'））[0]
//记录x和y坐标以避免混淆对象。临时。
var start_position_x=cy.$（'#'+next.data（'source'））.position（）.x
var start_position_y=cy.$（'#'+next.data（'source'））.position（）.y
var end_position_x=cy.$（'#'+next.data（'target'））.position（）.x
var end_position_y=cy.$（'#'+next.data（'target'））.position（）.y
//将目标节点移动到其开始位置
节点到移动位置（“x”，开始位置）
节点到移动位置（“y”，起始位置）
节点到移动样式（'可见性'，'可见'）
//然后设置目标节点移动到其原始位置的动画
节点到移动。设置动画(
{
位置：{end_position_x，end_position_y}
},
{ 
持续时间：1000，
完成：函数（）{
节点到移动样式（'可见性'，'可见'）
//如果（e！==未定义）{
//e.style（'可见性'，'可见'）
// }
}
}) 
//不适用于这些已注释的内容，是否适用于已注释的内容/
//我认为这意味着这是一个时间问题，dsf向前移动，而节点没有移动
//节点到移动位置（“x”，结束位置）
//节点到移动位置（“y”，结束位置）
dfs（下一个节点）
}
})
}

body{
字体：14px helvetica neue，helvetica，arial，无衬线；
}
#赛义德{
身高：100%；
宽度：100%；
位置：绝对位置；
左：0；
排名：0；
}
#吃{
位置：绝对位置；
左：1米；
顶部：1米；
字号：1em；
z指数：-1；
颜色：#c88；
}

图像

您同时运行了动画。使用承诺链接动画，例如，

node1.animation（）.play（）.promise（）。然后（node2.animation（）.play.promise（））。然后（…）

如何在dfs堆栈中链接.animate（）？直到最后，您才真正拥有节点列表，除非您建议只执行dfs以获得订单，然后使用链接+承诺方法？链接承诺。您可以在任何地方

.then（）

。