Qunee for HTML5 - 中文 : 弹簧布局

弹簧布局的原理是模拟物理环境,通过几种力的平衡实现的一种通用布局算法,是一种动态布局,可用于展现人物关系图和动态网络图,在Qunee中由Q.SpringLayouter类来实现。

布局原理

弹簧布局是三种力的平衡:静电斥力,弹力,中心引力,前两种力遵循库仑定律和胡可定律,后一种力是一种平衡,用于控制图元向中心聚拢

库仑定律:

 

胡克定律

 

中心引力,与距离成正比

 F = a *  D

布局参数

弹簧布局有三个控制因子:弹性系数,引力系数,斥力系数

#elasticity - 弹性系数

 数值越大,连线收缩越短,参考值0-10

#attractive - 中心吸引力系数

 数值越大,整体分布越密集,参考值0-1

#repulsion - 斥力系数

 数值越大,节点之间的间距越大,参考值0-100

示例

下面的例子中使用模拟数据,展示弹簧布局的效果

var graph = new Q.Graph("canvas");
 
var nodes = [];
function createNode(name){
    var node = graph.createNode(name);
    node.size = {width: 16};
    nodes.push(node);
    return node;
}
function createRandomEdge(){
    var from = nodes[Q.randomInt(nodes.length)];
    var to = nodes[Q.randomInt(nodes.length)];
    if(from != to){
        return graph.createEdge(from, to);
    }
}
var i = 0;
while(i++ < 100){
    createNode("" + i);
}
i = 0;
while(i++ < 100){
    createRandomEdge();
}
 
var layouter = new Q.SpringLayouter(graph);
layouter.repulsion = 50;
layouter.attractive = 0.5;
layouter.elastic = 5;
layouter.start();

运行效果