html幻灯片气泡,Qunee for HTML5 - 中文 : 气泡布局

气泡布局同属于树形布局，将树形结构通过极坐标方式分布

布局参数

气泡布局提供了下面这些参数：

#angleSpacing- 角度分布模式

支持平均分布(Q.Consts.ANGLE_SPACING_REGULAR)和按需分布(Q. Consts.ANGLE_SPACING_PROPORTIONAL)，默认为按需分布;

#radiusMode- 半径模式

支持统一半径(Q.Consts.RADIUS_MODE_UNIFORM

)和可变半径 (Q.Consts.RADIUS_MODE_VARIABLE)，默认为可变半径

#radius- 最小半径长度

#gap- 节点之间的间距

#startAngle- 起始旋转角度

示例

var graph = new Q.Graph("canvas");

function createNode(name, from){

var node = graph.createNode(name);

node.image = Q.Shapes.getShape(Q.Consts.SHAPE_CIRCLE, 40, 40);

if(from){

graph.createEdge(from, node);

}

return node;

}

var root = createNode("R");

var i = 0;

while(i++ < 3){

var node = createNode("" + i, root);

var j = 0;

while(j++ < 3){

createNode("" + i + "-" + j, node);

}

}

var layouter = new Q.BalloonLayouter(graph);

layouter.radiusMode = Q.Consts.RADIUS_MODE_UNIFORM;

layouter.radius = 100;

layouter.startAngle = Math.PI / 4;

layouter.doLayout({callback: function(){

graph.zoomToOverview();

}});

运行效果