数据呈现

数据转换成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