Cytoscapeでノードを展開する

Question

グラフを作成しようとしていますが、ページが読み込まれたときに、グラフのすべてのノードがツリーのようにルートノードから展開されます（逆のようにthis example）。このグラフはサイクルなしで事前定義されたルートノードを対象としています。

今、グラフ上のすべてのノードを非表示にします。次に、ルートノードからDFSを実行します。それぞれの子ノードで、親ノードの位置に移動し、その元の位置を宛先として.animate（）を実行して、滑らかなアニメーションが得られるようにします。コードに見られるように、.animate（）関数は残りのプログラムを一時停止しません。何かアドバイス？

var cy = cytoscape({ 
 
    container: document.getElementById('cy'), 
 

 
    boxSelectionEnabled: false, 
 
    autounselectify: true, 
 

 
    style: cytoscape.stylesheet() 
 
    .selector('node') 
 
     .css({ 
 
     'content': 'data(id)' 
 
     }) 
 
    .selector('edge') 
 
     .css({ 
 
     'curve-style': 'bezier', 
 
     'target-arrow-shape': 'triangle', 
 
     'width': 4, 
 
     'line-color': '#ddd', 
 
     'target-arrow-color': '#ddd', 
 
     }), 
 

 
    elements: { 
 
    nodes: [ 
 
     { data: { id: 'a' } }, 
 
     { data: { id: 'b' } }, 
 
     { data: { id: 'c' } }, 
 
     { data: { id: 'd' } }, 
 
     { data: { id: 'e' } } 
 
     ], 
 

 
     edges: [ 
 
     { data: { id: 'ae', weight: 1, source: 'a', target: 'e' } }, 
 
     { data: { id: 'ab', weight: 3, source: 'a', target: 'b' } }, 
 
     { data: { id: 'bc', weight: 5, source: 'b', target: 'c' } }, 
 
     { data: { id: 'cd', weight: 2, source: 'c', target: 'd' } }, 
 
     ] 
 
    }, 
 

 
    layout: { 
 
    name: 'breadthfirst', 
 
    directed: true, 
 
    padding: 10, 
 
    roots: '#a', 
 
    } 
 
}); // cy init 
 

 
var root_id = 'a' 
 

 
//get root 
 
var root = cy.$('#'+root_id)[0] 
 

 
//empty collection 
 
var collection = cy.collection() 
 

 
//hide all nodes except root 
 
cy.ready(function(event){ 
 
    collection = collection.add(cy.nodes('node[id!="'+root_id+'"]')) 
 
    collection = collection.add(cy.nodes().connectedEdges()); 
 
    collection.style('visibility', 'hidden') 
 
}); 
 

 

 
var visited_nodes = [root]; 
 
function dfs(node) { 
 
    //visit node 
 
    visited_nodes.push(node) 
 
    
 
    //for each neighbor w ov f 
 
    neighbors = cy.$('#'+node.id()).outgoers('edge') 
 
    neighbors.forEach(function (next) { 
 
    var next_node = cy.$('#'+next.data().target) 
 
    if (visited_nodes.indexOf(next_node) < 0){ 
 
     //visit each unvisited node 
 
     //we will move the target node to the source node, then use .animate() to move the target node back to it's original location 
 
     source_id = next.data('source') 
 
     target_id = next.data('target') 
 
     var node_to_move = cy.$('#' + next.data('target'))[0] 
 
     
 
     //record the x and y coordinates to avoid messing around for objects. temporary. 
 
     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 
 
     
 
     //move the target node to its start position 
 
     node_to_move.position('x',start_position_x) 
 
     node_to_move.position('y',start_position_y) 
 
     node_to_move.style('visibility', 'visible') 
 

 
     //then animate the target node moving to it's original position 
 
     node_to_move.animate(
 
     { 
 
     position: {end_position_x, end_position_y} 
 
     }, 
 
     { 
 
     duration: 1000, 
 
     complete: function(){ 
 
      node_to_move.style('visibility', 'visible') 
 
      // if (e !== undefined){ 
 
      // e.style('visibility', 'visible') 
 
      // } 
 
     } 
 
     }) 
 

 
     //DOESNT WORK WITH THESE COMMENTED OUT, DOES WITH THEM COMMENTED IN/ 
 
     //I think this means it is a timing problem, with the dsf moving forward without the nodes getting moved 
 
     // node_to_move.position('x',end_position_x) 
 
     // node_to_move.position('y',end_position_y) 
 
     
 
     dfs(next_node)  
 
    } 
 
    }) 
 
}

body { 
 
    font: 14px helvetica neue, helvetica, arial, sans-serif; 
 
} 
 

 
#cy { 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 

 
#eat { 
 
    position: absolute; 
 
    left: 1em; 
 
    top: 1em; 
 
    font-size: 1em; 
 
    z-index: -1; 
 
    color: #c88; 
 
}

<!DOCTYPE html> 
 
<!-- This code is for demonstration purposes only. You should not hotlink to Github, Rawgit, or files from the Cytoscape.js documentation in your production apps. --> 
 
<html> 
 
<head> 
 
<link href="style.css" rel="stylesheet" /> 
 
<meta charset=utf-8 /> 
 
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui"> 
 
<title>Images</title> 
 
<script src="cube/node_modules/cytoscape/dist/cytoscape.js"></script> 
 
</head> 
 
<body> 
 
<div id="cy"></div> 
 
<!-- Load appplication code at the end to ensure DOM is loaded --> 
 
<script src="expand.js"></script> 
 
</body> 
 
</html>

Answer 1

あなたは同時にアニメーションを実行しました。約束を使ったチェーンアニメーション。 node1.animation().play().promise().then(node2.animation().play.promise()).then(...)