轻量高效的拓扑图组件
zh

Qunee Developer Guide

数据呈现

数据转换成Qunee元素对象,添加到图形组件后,便可以查看呈现效果了:

var graph = new Q.Graph("canvas");
function onDataCollected(txt){
    var json = JSON.parse(txt);
    translateToQuneeElements(json);
    graph.moveToCenter();
}
function translateToQuneeElements(json){
    if(json.nodes){
        Q.forEach(json.nodes, toQuneeNode);
    }
    if(json.edges){
        Q.forEach(json.edges, toQuneeEdge);
    }
}
request("./data-server", "", onDataCollected);

运行效果

自动布局

此外,对于没有位置信息的拓扑数据,通常可以使用自动布局,以完成节点的自动分布

比如使用弹簧布局

var layouter = new Q.SpringLayouter(graph);
layouter.start();

ScreenShot 2014-06-05 at 下午3.54.43.png (image/png)
ScreenShot 2015-05-04 at 11.38.30 AM.png