Qunee for HTML5 - 中文 : 按图遍历

图元容器中的元素根据连接关系,构成另一种图形结构,在图论学中称为图,节点代表图中的点,连线代表图中的边,Qunee支持对图中节点的遍历,可应用于自动布局算法

  • #forEachByTopoDepthFirstSearch(call, scope, postOrder) - 图的深度优先遍历,支持先序和后序遍历默认为先序遍历
  • #forEachByTopoBreadthFirstSearch(call, scope, postOrder) - 图的广度优先遍历,支持先序和后序遍历默认为先序遍历

拓扑结构如下图,箭头表示连线方向,按不同的遍历方式,得到不同的调用次序

示例

var model = graph.graphModel;
var a = model.add(new Q.Node('A'));
var b = model.add(new Q.Node('B'));
var c = model.add(new Q.Node('C'));
var d = model.add(new Q.Node('D'));
var e = model.add(new Q.Node('E'));
var f = model.add(new Q.Node('F'));
model.add(new Q.Edge(a, b));
model.add(new Q.Edge(a, c));
model.add(new Q.Edge(a, d));
model.add(new Q.Edge(c, d));
model.add(new Q.Edge(c, e));
model.add(new Q.Edge(e, b));
model.add(new Q.Edge(a, f));
 
Q.log('forEachByTopoDepthFirstSearch by pre-order');
model.forEachByTopoDepthFirstSearch(function(node){
    Q.log(node.name);
});
Q.log('forEachByTopoDepthFirstSearch by post-order');
model.forEachByTopoDepthFirstSearch(function(node){
    Q.log(node.name);
}, null, true);
Q.log('forEachByTopoBreadthFirstSearch by pre-order');
model.forEachByTopoBreadthFirstSearch(function(node){
    Q.log(node.name);
});
Q.log('forEachByTopoBreadthFirstSearch by post-order');
model.forEachByTopoBreadthFirstSearch(function(node){
    Q.log(node.name);
}, null, true);
 

打印结果:

Icon

forEachByTopoDepthFirstSearch by pre-order

A

B

C

D

E

F

forEachByTopoDepthFirstSearch by post-order

B

D

E

C

F

A

forEachByTopoBreadthFirstSearch by pre-order

A

B

C

D

F

E

forEachByTopoBreadthFirstSearch by post-order

B

E

C

D

F