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