Qunee for HTML5 - 中文 : 树形布局

树图是一种常见的拓扑图结构,通常用来表现层次结构,组织图,从属关系等,树形结构通常通过父子关系形成,也可以通过拓扑连接关系形成

树形布局按传统的分支树分布,可设置层次间排列方向,同层节点之间的排列方式等,组合实现各种树形布局效果

布局参数

主要提供两个参数,分别控制层次之间与同层间的布局效果,可以设置给布局器对象或者节点属性,前者全局生效,后者对单个分支起作用:

比如设置全局布局方向为从下往上,可以使用下面的代码:

layouter.parentChildrenDirection = Q.Consts.DIRECTION_TOP;

#parentChildrenDirection - 层次间布局方向

支持上下左右中等方向:

  • Q.Consts.DIRECTION_RIGHT  - 向右布局
  • Q.Consts.DIRECTION_LEFT - 向左布局
  • Q.Consts.DIRECTION_CENTER - 水平居中布局
  • Q.Consts.DIRECTION_BOTTOM - 向下布局
  • Q.Consts.DIRECTION_TOP - 向上布局
  • Q.Consts.DIRECTION_MIDDLE - 垂直居中布局

#layoutType - 相邻节点的布局类型

提供平均分布和两侧分布两种布局类型:

  • Q.Consts.LAYOUT_TYPE_EVEN - 平均分布,根据层次间方向自动确定孩子布局方向
  • Q.Consts.LAYOUT_TYPE_EVEN_HORIZONTAL - 水平平均分布
  • Q.Consts.LAYOUT_TYPE_EVEN_VERTICAL - 垂直平均分布
  • Q.Consts.LAYOUT_TYPE_TWO_SIDE - 两侧分布

示例

var graph = new Q.Graph("canvas");
 
function createNode(name, from){
    var node = graph.createNode(name);
    if(from){
        graph.createEdge(from, node);
    }
    return node;
}
var root = createNode("R");
root.parentChildrenDirection = Q.Consts.DIRECTION_BOTTOM;
var i = 0;
while(i++ < 3){
    var node = createNode("" + i, root);
    node.parentChildrenDirection = Q.Consts.DIRECTION_RIGHT;
    node.layoutType = Q.Consts.LAYOUT_TYPE_EVEN_VERTICAL;
    var j = 0;
    while(j++ < 3){
        createNode("" + i + "-" + j, node);
    }
}
 
var layouter = new Q.TreeLayouter(graph);
layouter.layoutType = Q.Consts.LAYOUT_TYPE_EVEN_HORIZONTAL;
layouter.doLayout({callback: function(){
    graph.zoomToOverview();
}});

运行效果