4

cytoscape js我可以使用库创建图表。我正在关注本教程，我是这样实现的。

代码：

$(function(){ // on dom ready

$('#cy').cytoscape({
  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'content': 'data(id)'
      })
    .selector('edge')
      .css({
        'target-arrow-shape': 'triangle',
        'width': 4,
        'line-color': '#ddd',
        'target-arrow-color': '#ddd'
      })
    .selector('.highlighted')
      .css({
        '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' } },
        { data: { id: 'f' } },
        { data: { id: 'g' } }
      ], 

      edges: [
        { data: { id: 'ab', weight: 1, source: 'a', target: 'b' } },
        { data: { id: 'ac', weight: 2, source: 'a', target: 'c' } },
        { data: { id: 'bd', weight: 3, source: 'b', target: 'd' } },
        { data: { id: 'be', weight: 4, source: 'b', target: 'e' } },
        { data: { id: 'cf', weight: 5, source: 'c', target: 'f' } },
        { data: { id: 'cg', weight: 6, source: 'c', target: 'g' } }       
      ]
    },

  layout: {
    name: 'breadthfirst',
    directed: true,
    roots: '#a',
    padding: 5
  },

  ready: function(){
    window.cy = this;

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

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

      if( i < bfs.path.length ){
        i++;
        setTimeout(highlightNextEle, 1000);
      }
    };

    // kick off first highlight
    highlightNextEle();
  }
});

}); // on dom ready

在我的实现中，我需要突出显示节点 d 和 g 之间的路径。

如何找到节点之间的路径并突出显示它们？

4

3 回答 3

3

使用dijkstra算法方法我们可以找到节点之间的路径。 

 var dijkstra = cy.elements().dijkstra('#e',function(){
          return this.data('weight');
        },false);
        var bfs = dijkstra.pathTo( cy.$('#i') );

完整代码：

$(function(){ // on dom ready

$('#cy').cytoscape({
  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'content': 'data(id)'
      })
    .selector('edge')
      .css({
        'target-arrow-shape': 'triangle',
        'width': 4,
        'line-color': '#ddd',
        'target-arrow-color': '#ddd'
      })
    .selector('.highlighted')
      .css({
        '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' } },
        { data: { id: 'f' } },
        { data: { id: 'g' } },
        { data: { id: 'h' } },
        { data: { id: 'i' } }
      ], 

      edges: [
        { data: { id: 'ab', weight: 1, source: 'a', target: 'b' } },
        { data: { id: 'ac', weight: 2, source: 'a', target: 'c' } },
        { data: { id: 'bd', weight: 3, source: 'b', target: 'd' } },
        { data: { id: 'be', weight: 4, source: 'b', target: 'e' } },
        { data: { id: 'cf', weight: 5, source: 'c', target: 'f' } },
        { data: { id: 'cg', weight: 6, source: 'c', target: 'g' } },
        { data: { id: 'ah', weight: 7, source: 'a', target: 'h' } },
        { data: { id: 'hi', weight: 8, source: 'h', target: 'i' } } 
      ]
    },

  layout: {
    name: 'breadthfirst',
    directed: true,
    roots: '#a',
    padding: 5
  },

  ready: function(){
    window.cy = this;

    var dijkstra = cy.elements().dijkstra('#e',function(){
      return this.data('weight');
    },false);
    var bfs = dijkstra.pathTo( cy.$('#i') );
    var x=0;
    var highlightNextEle = function(){
     var el=bfs[x];
      el.addClass('highlighted');
      if(x<bfs.length){
        x++;
        setTimeout(highlightNextEle, 500);
      }
       };
    highlightNextEle();
  }
});

}); // on dom ready
于 2014-07-29T12:26:50.533 回答
1

我想突出显示所有可能的路径

event.target- 是起始节点

event.target.successors().animate({
      style: { lineColor: 'red' }
});
于 2018-03-21T16:07:36.267 回答
0

假设您选择了两个节点并将它们存储在source_nodeand中target_node，并且您希望使用类“path_element”标记其间的所有内容：

p = cy.elements().aStar({root: source_node, goal: target_node, directed: true}).path;
if (p) {
  p.filter(function(i,x) { return x != source_node && x != target_node; })
      .addClass('path_element');

  p.edgesWith(p)
      .addClass('path_element');
}
于 2016-08-29T13:57:41.533 回答