Balloon Layouter

Bubble layout also belongs to tree layout. Tree structure can be distributed via the way of polar coordinates

Layout params

Bubble layout provides the following params:

• #angleSpacing - angle distribution mode
  Support even layout(Q.Consts.ANGLE_SPACING_REGULAR)and distribute by demand(Q. Consts.ANGLE_SPACING_PROPORTIONAL); default to distribute by demand;
• #radiusMode - radius mode
  Supports unified radius(Q.Consts.RADIUS_MODE_UNIFORM)an variable radius (Q.Consts.RADIUS_MODE_VARIABLE). Default to variable radius
• #radius - Min radius length
• #gap - distance among nodes
• #startAngle - start rotate angle

Example

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();
}});

Operation effect

**
**