Light High Efficiency Graph Component
en

Qunee Developer Guide

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:

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

**
**