Cytoscape.jsでグラフを作成するアニメーション

Question

こんにちはCytoscape.jsでグラフを作成する方法を学習したいと思います。私にとってこれは、ユーザーがレイアウトアルゴリズムを選択し、ルートノードから始まり、エッジがノードから成長し、最終的にはグラフの次のノードの方向を指すことを意味し、そのノードは小さなドットが表示され、プロセスが繰り返されます。これは最終的に、構築されているグラフ全体をアニメーション化することになります。私はこれがちょうどImages and Breadthfirst Layout Demoの反対だと思う。

これを行うための戦略を見つけ出すことができますか？私は、ノードのリストを持つヘッドレスグラフをレイアウトし、それらの位置を使ってHTMLコンテナに表示されたメイングラフにアニメーションを表示する必要があると考えています。 initのすべての要素を持っている場合は、単にグラフでそれらのすべてを置く

Answer 1

任意の助け

感謝。最初はスタイルシートで非表示にすることができ、アニメーションで1つずつ表示することができます。

返されたanimationオブジェクトとその再生の約束を使用できるので、.animate()ではなく.animation()を使用します。タイムラインとして一連の約束を作成することができます。

Answer 2

ここで私が使用したのは、遅延の代わりにmaxkfranzが示唆しているように、再生の約束を使ってうまくいくでしょう。

/****************************************************************************************************  
* https://gist.github.com/maxkfranz/aedff159b0df05ccfaa5 
* method will animate the graph building, from parent to child 
* 
*/ 
animateGraphBuilding = function(nodes){ 

    var delay = 0;  
    var size = nodes.length; 
    var duration = (200000/size); 
    mod = $('#animationSpeed').val()/2; 
    if(mod < 1){ 
     mod = 1; 
     $('#animationSpeed').val(mod); 
    }else if(mod > 100){ 
     mod = 100; 
     $('#animationSpeed').val(mod); 

    } 

    duration /= mod; 

    var visitedMap = {};//used to ensure nodes are only animated once 

    for(var index = 0; index < size; ++index){ 
     visitedMap[nodes[index].data('id')] = 0; 
    } 
    var nodesCopy = nodes.clone();//store original rendered positions 

    //loop through the list of nodes and then, 
    //Find connected nodes and then, 
    //loop through connected nodes and animated from parent to original position 
    for(var i = 0; i < nodes.length; ++i){ 
     var cNode = nodes[i];     
     var nextNodes = cNode.connectedEdges(
       function(){ 
        return this.source().same(cNode); 
       } 
      ).targets();                   

     for (var index = 0; index < nextNodes.length; ++index){ 
      var nNode = nextNodes[index]; 

      (function(currentNode, x, copyNode, nextNode){   

       if(nextNode != null && x != 0 && visitedMap[nextNode.data('id')] < 1){ 
        ++visitedMap[nextNode.data('id')]; 
        //console.log('currentNode: ' + currentNode.data('id')+ ', x: ' + x + ', nextNode: ' + nextNode.data('id')); 

        var position = nextNode.renderedPosition();     
        nextNode.renderedPosition(copyNode.renderedPosition());   

        nextNode.delay(delay, function(){ 
         nextNode.style("visibility", "visible");       
        }).animate( {     
          renderedPosition: position //to this position        
         }, { 
          duration: duration, 
          complete: function(){/*do nothiing*/} 
         }                 
        );     
       }else if (nextNode != null && visitedMap[nextNode.data('id')] < 1){ 

        ++visitedMap[nextNode.data('id')]; 
        var position = nextNode.renderedPosition();     
        nextNode.renderedPosition(copyNode.renderedPosition());   

        nextNode.delay(delay, function(){ 
         currentNode.style("visibility", "visible"); //show the root node 
         nextNode.style('visibility', 'visible');      
        }).animate( {     
          renderedPosition: position,//to this position        
         }, { 
          duration: duration, 
          complete: function(){/*do nothing*/}      
         }          
        );           
       }   

       delay += duration; 

      })(cNode, i, nodesCopy[i], nNode);      
     } //end inner for, iterates through children nodes 
    } // end of outter for, iterates through all nodes     
};