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

您同时运行了动画。使用promises的链动画，例如node1.animation().play().promise().then( node2.animation().play.promise() ).then( ... )

使用Cytoscape扩展节点

1 个答案: