前端拿到数据后,首先需要转换成Javascript所支持的数据格式,以便数据属性的读取,比如JSON格式的文本数据,可以通过JSON#parse(...)进行解析,对于XML格式的文本可以通过DOMParse#parseFromString转换成XML对象

转换成JS对象

继续上面的示例,将文本解析成JSON对象

function onDataCollected(txt){
    var json = JSON.parse(txt);
    translateToQuneeElements(json);
}

转换成Qunee图元

Qunee图形组件中的图形都有对应的模型对象,称为Qunee图元,用户数据需要先转换成这种元素,才能在Qunee图形组件中展示,Qunee元素有多种类型,支持丰富的呈现样式和扩展方式,不同的数据根据其显示意图转换成不同类型的Qunee图元,并设置相应的图形样式,特殊展示效果的可以通过UI扩展来实现

将JSON对象转换成Qunee元素,并添加到图形容器

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];
            var to = map[data.to];
            if(!from || !to){
                return;
            }
            var edge = graph.createEdge(data.name, from, to);
            edge.set("data", data);
        }, graph);
    }
}