javascript - 在 Cytoscape JS 中突出显示多个边缘

Question

我有一个像这样的无向图:

 var cy = cytoscape({
          container: document.getElementById('cy'),
          elements: [
            // nodes
            { data: { id: 'a' } },
            { data: { id: 'b' } },
            { data: { id: 'c' } },
            { data: { id: 'd' } },

            // edges
            {
              data: {
                id: 'ab',
                source: 'a',
                target: 'b'
              }
            },
            {
              data: {
                id: 'bc',
                source: 'b',
                target: 'c'
              }
            },
            {
              data: {
                id: 'cd',
                source: 'c',
                target: 'd'
              }
            }
          ],
          style: [
            {
              selector: 'node',
              style: {
                shape: 'hexagon',
                'background-color': 'red',
                label: 'data(id)'
              }
            }],
          layout: {
            name: 'grid'
          }
        });

如您所见，您可以使用 c 和 d 从 a 转到 d。我想要实现的是，如果边缘 ab 突出显示，则边缘 bc 和 cd 也将突出显示。有没有办法做到这一点？我在互联网上找不到任何有关此内容的来源...谢谢。

Answer 1

看看包含的算法，如 Floyd-Warshall或Dijkstra 。从他们的输出中，您应该能够生成相关边缘的突出显示。

例如。

var dijkstra = cy.elements().dijkstra('#an_id')
var path = dijkstra.pathTo( cy.elements('node#another_id'))

path.forEach(function(ele){
  if (ele.isEdge()){
    ele.addClass("class_that_has_highlight_styling")
  }
})