Question

我想为要依次访问的每个边缘制作动画，但是当我尝试同时对所有边缘制作动画时，该如何解决呢？

cy.edges().forEach(e => {
    let src = parseInt(e.source().data('id'))
    let trg = parseInt(e.target().data('id'))
    let w = parseInt(e.style('label'))
    e.animation({
        'style': {'line-color': '#FF0000'}},
        {'duration': '2000'}).play()
}

Answer 1

您可以看到here，cytoscape为您的问题提供了此演示：

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

  boxSelectionEnabled: false,
  autounselectify: true,

  style: cytoscape.stylesheet()
    .selector('node')
    .style({
      'content': 'data(id)'
    })
    .selector('edge')
    .style({
      'curve-style': 'bezier',
      'target-arrow-shape': 'triangle',
      'width': 4,
      'line-color': '#ddd',
      'target-arrow-color': '#ddd'
    })
    .selector('.highlighted')
    .style({
      'background-color': '#61bffc',
      'line-color': '#61bffc',
      'target-arrow-color': '#61bffc',
      'transition-property': 'background-color, line-color, target-arrow-color',
      'transition-duration': '0.5s'
    }),

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

    edges: [{
        data: {
          id: 'a"e',
          weight: 1,
          source: 'a',
          target: 'e'
        }
      },
      {
        data: {
          id: 'ab',
          weight: 3,
          source: 'a',
          target: 'b'
        }
      },
      {
        data: {
          id: 'be',
          weight: 4,
          source: 'b',
          target: 'e'
        }
      },
      {
        data: {
          id: 'bc',
          weight: 5,
          source: 'b',
          target: 'c'
        }
      },
      {
        data: {
          id: 'ce',
          weight: 6,
          source: 'c',
          target: 'e'
        }
      },
      {
        data: {
          id: 'cd',
          weight: 2,
          source: 'c',
          target: 'd'
        }
      },
      {
        data: {
          id: 'de',
          weight: 7,
          source: 'd',
          target: 'e'
        }
      }
    ]
  },

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

var bfs = cy.elements().bfs('#a', function() {}, true);

var i = 0;
var highlightNextEle = function() {
  if (i < bfs.path.length) {
    bfs.path[i].addClass('highlighted');

    i++;
    setTimeout(highlightNextEle, 1000);
  }
};

// kick off first highlight
highlightNextEle();

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

#cy {
  height: 100%;
  width: 100%;
  float: right;
  position: absolute;
}

<html>

<head>
  <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">
  <script src="https://unpkg.com/cytoscape@3.3.0/dist/cytoscape.min.js">
  </script>
</head>

<body>
  <div id="cy"></div>
</body>

</html>

因此，您无需定义bfs路径，而是可以定义自己的路径并使用该演示的高光功能。

祝你好运

cystoscape中的顺序边缘动画

1 个答案: