Qunee 拓扑图 数据采集、数据转换、数据呈现、交互与交错案例

Qunee是一种前端技术，不涉足后台服务和数据通讯，使用Qunee开发应用通常按下面的流程：

数据采集 --> 数据转换 --> 数据呈现 --> 交互监听 --> 数据操作 --> 数据提交，其中与Qunee直接相关的是中间的四部分。

$(function() {
    var graph = new Q.Graph("canvas");
    //数据采集
    function onDataCollected(txt){
        var json = JSON.parse(txt);
        console.log(json,'我是JSON');
        // 我是JSON:
        // {    
        //     "nodes":[
        //         {"name": "A", "x": -100, "y": -50, "id": 1},
        //         {"name": "B", "id": 2},
        //         {"name": "C",  "x": -50, "y": -40,"id": 3}
        //     ], 
        //     "edges": [
        //         {"name": "Edge", "from":1, "to":2}
        //     ]
        // }
        translateToQuneeElements(json, graph);
    }
    //数据转换
    function translateToQuneeElements(json, graph){
        var map = {};
        if(json.nodes){
            Q.forEach(json.nodes, function(data){
                var node = graph.createNode(data.name, data.x || 0, data.y || 0);
                node.set("data", data);
                //数据呈现
                map[data.id] = node;
            });
        }
        if(json.edges){
            Q.forEach(json.edges, function(data){
                var from = map[data.from];//map[data.id]--始
                var to = map[data.to];//map[data.id]--末

                //非始、非末即结束
                if(!from || !to){
                    return;
                }
                //创建线
                var edge = graph.createEdge(data.name, from, to);//线的名称、始、末
                edge.set("data", data);
            }, graph);
        }
    }
    //鼠标双击触发
    graph.ondblclick = function(evt){
        console.log(evt,'我是event');
        var node = evt.data;
        console.log(node,'我是node');//undefined 
        if(node){
            var newName = prompt("New Name:");
            if(newName){
            node.name = newName;
            }
        }
    }
    request("./data-server", "", onDataCollected);
});


function request(url, params, callback, callbackError) {
    try {
        var req = new XMLHttpRequest();
        req.open('GET', encodeURI(url));
        req.onreadystatechange = function(e) {
            if (req.readyState != 4) {
                return;
            }
            if (200 == req.status) {
                var code = req.responseText;
                if (code && callback) {
                    callback(req.responseText);
                }
                return;
            }else{
                if (callbackError) {
                    callbackError();
                }
            }
        }
        req.send(params);
    } catch (error) {
        if (callbackError) {
            callbackError();
        }
    }
}

完整案例代码