graph updatesù

Luigi Serra
1 parent 1aced18e
Showing 3 changed files with 271 additions and 197 deletions
datalets/graph-datalet/demo/demo-clustering.html
datalets/graph-datalet/graph-datalet.html
datalets/graph-datalet/graph-with-clustering-datalet_.html → datalets/graph-datalet/graph-with-clustering-extend-datalet.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>Demo Graph with node clustering</title>
-    <link rel="import" href="../graph-with-clustering-datalet.html">
+    <link rel="import" href="../graph-with-clustering-extend-datalet.html">
     <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
 </head>
 <script>
@@ -11,8 +11,8 @@
         var xhttp = new XMLHttpRequest();
         xhttp.onreadystatechange = function() {
             if (xhttp.readyState == 4 && xhttp.status == 200) {
-                document.getElementById("graph-placeholder").innerHTML = '<graph-with-clustering-datalet width="1000" height="700" graph=\'' + JSON.parse(xhttp.responseText).graph +
-                                                                         '\'></graph-with-clustering-datalet>';
+                document.getElementById("graph-placeholder").innerHTML = '<graph-with-clustering-extend-datalet width="1000" height="700" graph=\'' + JSON.parse(xhttp.responseText).graph +
+                                                                         '\'></graph-with-clustering-extend-datalet>';
             }
         };
         xhttp.open("GET", "http://192.168.164.128/public_room/ajax/get-graph?id=1&type=comments", true);
@@ -328,7 +328,9 @@ Example:
             },
             active : function (t) {
-               _this.fire('graph-datalet_node-clicked', {node : t});
+                if(t.image) return;
+
+                _this.fire('graph-datalet_node-clicked', {node : t});
                 if(prev_selected_node != null){
                     prev_selected_node.style.fill = prev_selected_node.style.stroke;
@@ -49,7 +49,7 @@ Example:
 @group datalets
 -->
-<dom-module id="graph-with-clustering-datalet">
+<dom-module id="graph-with-clustering-extend-datalet">
     <template>
         <link rel="stylesheet" href="static/css/graphStyle.css">
@@ -95,7 +95,7 @@ Example:
         _this  = null;
         Polymer({
-            is : 'graph-with-clustering-datalet',
+            is : 'graph-with-clustering-extend-datalet',
             properties: {
                 /**
@@ -111,8 +111,8 @@ Example:
                 },
                 svgNodes : {
-                   type : Array,
-                   value : []
+                    type : Array,
+                    value : []
                 },
                 svgLinks : {
@@ -158,186 +158,251 @@ Example:
                     value: []
                 },
-                hulls : {
-                    type: Array,
-                    value: []
-                },
                 hull : {
                     type : Array,
                     value : []
+                },
+                /*test*/
+                hullg : {
+                    type : Array,
+                    value : []
+                },
+                offset :{
+                    type : Number,
+                    value : 15
                 }
-            },
-            groupPath : function(d) {
-                return "M" +
-                        d3.geom.hull(d.values.map(function(i) { return [i.x, i.y];}))
-                           .join("L")
-                        + "Z";
+                /*end test*/
             },
-            groupFill : function(d, i) {
-                var fill = d3.scale.category10();
-                return fill(i & 3);
-            },
+            convexHulls : function() {
+                var hullset = [];
+                /*for(var i in _this.groups){
+                    for(var j=0; j < _this.groups[i].length && _this.groups[i].extend;j++){
+                        var vertices = [];
+                        for(var v=0;v < _this.groups[i][j].values.length; v++){
+                            vertices.push([_this.groups[i][j].values[v].x - _this.offset, _this.groups[i][j].values[v].y - _this.offset]);
+                            vertices.push([_this.groups[i][j].values[v].x - _this.offset, _this.groups[i][j].values[v].y + _this.offset]);
+                            vertices.push([_this.groups[i][j].values[v].x + _this.offset, _this.groups[i][j].values[v].y - _this.offset]);
+                            vertices.push([_this.groups[i][j].values[v].x + _this.offset, _this.groups[i][j].values[v].y + _this.offset]);
+                        }
-            createHulls : function(nodes){
-                this.svg.selectAll("path")
-                        .data(nodes)
-                        .attr("d", this.groupPath)
-                        .enter().insert("path", "g")
-                        //.style("fill", _this.groupFill)
-                        .style("fill", "#60df20")
-                        //.style("stroke", _this.groupFill)
-                        .style("stroke", "#60df20")
-                        .style("stroke-width", 30)
-                        .style("stroke-linejoin", "round")
-                        .style("opacity", .2)
-                        .attr("d", this.groupPath);
+                        hullset.push({id :  parseInt(i) + 3, sentiment: j , path: d3.geom.hull(vertices), extend : _this.groups[i][j].extend});
+                    }
+                }*/
+                for(var n in _this.hulls){
+                   var vertices = [];
+                   for(var v in _this.hulls[n]){
+                       vertices.push([_this.hulls[n][v].x - _this.offset, _this.hulls[n][v].y - _this.offset]);
+                       vertices.push([_this.hulls[n][v].x - _this.offset, _this.hulls[n][v].y + _this.offset]);
+                       vertices.push([_this.hulls[n][v].x + _this.offset, _this.hulls[n][v].y - _this.offset]);
+                       vertices.push([_this.hulls[n][v].x + _this.offset, _this.hulls[n][v].y + _this.offset]);
+                   }
+                    hullset.push({/*id :  parseInt(i) + 3,*/ sentiment: _this.hulls[n][v].sentiment , path: d3.geom.hull(vertices), extend : true});
+                }
+                return hullset;
             },
-            getNetwork : function(){
-
-                var nodes = [], links = [], prevLevel = 1, prevGroupIndex = 1;
+            fill : function(d){
+                switch(((d - 1) % 3)){
+                    case 0 :
+                        return "#1F77B4";
+                    case 1 :
+                        return "#2CA02C";
+                    case 2:
+                        return "#FF1E1E";
+                }
+            },
-                //for(var i=0; i < 27; i++) groups.push({key : "" + i , values : []});
+            drawCluster : function(d) {
+                var curve = d3.svg.line()
+                        .interpolate("cardinal-closed")
+                        .tension(.85);
-                //nodes.push(this.graph.nodes[0])
+                return curve(d.path); // 0.8
+            },
+            getGroups : function(){
                 for(var i= 0,j=0; i < this.graph.nodes.length;i++,j+=3){
-                    var node = this.graph.nodes[i];
-                    var l = node.level;
-                    var sentiment = node.sentiment;
-                    var id = node.id;
-                    var father = node.father;
-
-                    this.groups.push([{key : "" + j, values : []}, {key : "" + (j + 1), values : []}, {key : "" + (j + 2), values : []}]);
-                    if(this.graph.nodes[i].father != null){
-                        switch (parseInt(this.graph.nodes[i].sentiment)){
-                            case 1:
-                                this.groups[this.graph.nodes[i].father.id][0].values.push(this.graph.nodes[i]);
-                               break;
-                            case 2:
-                                this.groups[this.graph.nodes[i].father.id][1].values.push(this.graph.nodes[i]);
-                                break;
-                            case 3:
-                                this.groups[this.graph.nodes[i].father.id][2].values.push(this.graph.nodes[i]);
-                                break;
-                        }
-                    }
-                   /*var node = this.graph.nodes[i];
-                   var l = node.level;
-                   var sentiment = node.sentiment;
-                   var id = node.id;
+                    var f = this.graph.nodes[i].father;
+                    if(f != null) {
+                        while (f.sentiment == this.graph.nodes[i].sentiment) f = f.father;
+                    }
-                   var gi = (((this.graph.nodes[i].level - 1) * 3) + parseInt(this.graph.nodes[i].sentiment));
-                   groups[gi].values.push(node);*/
+                    if(f != null){
+                        if(this.groups[f.id] == undefined){
+                            this.groups[f.id] = ([
+                                {key: "" + j, values: [], extend: false},
+                                {key: "" + (j + 1), values: [],extend: false},
+                                {key: "" + (j + 2), values: [], extend: false}
+                            ]);
+                        }
+                        this.graph.nodes[i].group = f.id;
+                        this.groups[f.id][parseInt(this.graph.nodes[i].sentiment) - 1].values.push(this.graph.nodes[i]);
+                    }else{
+                        this.graph.nodes[i].group = -1;
+                    }
                 }
+            },
+
+            getNetwork : function(){
+                var nodes = [], links = [];
+                var nodesMap = [];
+
+                //Associate the root to first node
+                var root = ({
+                    id: 0,
+                    group: -1,
+                    r: 30,
+                });
+                nodes.push(root);
+                nodesMap[-1] = root;
+                nodesMap[0] = root;
                 this.hulls = [];
-                var index = 0;
-                for(var i=0; i < _this.groups.length; i++){
-                    for(var j=0; j < _this.groups[i].length;j++){
-                        if(_this.groups[i][j].values.length != 0) {
-                            if(_this.groups[i][j].values.length > 0){
-                                _this.groups[i][j].key = "" + index;
-                                index++;
-                                this.hulls.push(_this.groups[i][j]);
+                for(var g in this.groups){
+                    for(var s in this.groups[g]) {
+                        if(this.groups[g][s].values.length > 0) {
+                            if(this.groups[g][s].extend){
+                                this.hulls[g + "-" + s] = [];
+                                for(var n=0; n < this.groups[g][s].values.length;n++) {
+                                    var node = ({
+                                        id: g + "-" + s + "-" + n,
+                                        group: g + "-" + s,
+                                        sentiment: parseInt(s) + 1,
+                                        r: 3,
+                                    });
+                                    nodes.push(node);
+                                    nodesMap[this.groups[g][s].values[n].id] = node;
+                                    this.hulls[g + "-" + s].push(node);
+                                }
+                            }else{
+                                var node =  ({
+                                    id : g + "-"+ s,
+                                    group: g,
+                                    sentiment: parseInt(s) + 1,
+                                    nodes: this.groups[g][s].values,
+                                    r: this.groups[g][s].values.length * 3,
+                                    extend: false
+                                });
+
+                                nodes.push(node);
+
+                                for(var n=0; n < this.groups[g][s].values.length;n++)
+                                    nodesMap[this.groups[g][s].values[n].id] = node;
                             }
+
+                            //root.r +=(this.groups[g][s].values.length * 3);
                         }
                     }
                 }
-            },
-            /*TEST*/
-            convexHulls : function(nodes, index, offset) {
-                var hulls = {};
-
-                // create point sets
-                for (var k=0; k<nodes.length; ++k) {
-                    var n = nodes[k];
-                    if (n.size) continue;
-                    var i = index(n),
-                            l = hulls[i] || (hulls[i] = []);
-                    l.push([n.x-offset, n.y-offset]);
-                    l.push([n.x-offset, n.y+offset]);
-                    l.push([n.x+offset, n.y-offset]);
-                    l.push([n.x+offset, n.y+offset]);
+                for(var e = 0; e < this.graph.links.length; e++){
+                    if(this.graph.nodes[this.graph.links[e].source.id].group !=  this.graph.nodes[this.graph.links[e].target.id].group) {
+                        var id = nodesMap[this.graph.links[e].source.id].id + "-" + nodesMap[this.graph.links[e].target.id].id;
+                        var link = this.findLink(links, id);
+                        if(link != null)
+                            link.size += 3;
+                        else
+                            links.push({
+                                id: id,
+                                source: nodesMap[this.graph.links[e].source.id],
+                                target: nodesMap[this.graph.links[e].target.id],
+                                value: 120,
+                                size : 1
+                            });
+                    }else{
+                        links.push({
+                            id: id,
+                            source: nodesMap[this.graph.links[e].source.father.id],
+                            target: nodesMap[this.graph.links[e].target.id],
+                            value: 120,
+                            size : 1
+                        });
+                    }
                 }
-                // create convex hulls
-                var hullset = [];
-                for (i in hulls) {
-                    hullset.push({group: i, path: d3.geom.hull(hulls[i])});
-                }
-                return hullset;
-            },
+                return {nodes : nodes, links : links};
+                //return {nodes : this.graph.nodes, links : this.graph.links};
-            drawCluster : function(d) {
-                return this.curve(d.path); // 0.8
             },
-            curve : function(d){
-                var curve = d3.svg.line()
-                      .interpolate("cardinal-closed")
-                      .tension(.85);
-                return curve(d);
+            findLink : function(links, id){
+                for(var i=0; i<links.length;i++){
+                    if(links[i].id == id) return links[i];
+                }
+                return null;
+
+
             },
-            /*END TEST*/
             init : function(){
-                this.getNetwork();
+                var net = this.getNetwork();
                 if(this.force != null) this.force.stop();
                 force = d3.layout.force()
-                                     .nodes(this.graph.nodes)
-                                     .links(this.graph.links)
-                                        .size([this.width, this.height])
-                                        .charge(-1e3)
-                                        .friction(.7)
-                                        .linkDistance(function (t){ return t.value ? t.value : 80})
-                                        .on("tick", this.tick).start();
-
-                _this.svg.selectAll("path").remove();
-                _this.hull = _this.svg.append("path")
-                        .style("fill", "#60df20")
-                        .style("stroke", "#60df20")
-                        .style("stroke-width", 30)
+                        .nodes(net.nodes)
+                        .links(net.links)
+                        .size([this.width, this.height])
+                        .charge(-1e3)
+                        .friction(.7)
+                        .linkDistance(function (t){ return t.value ? t.value : 80})
+                        .on("tick", this.tick).start();
+
+                this.hullg.selectAll("path.hull").remove();
+                this.hull = this.hullg.selectAll("path.hull")
+                        .data(this.convexHulls)
+                        .enter().append("path")
                         .attr("class", "hull")
-                        .style("stroke-linejoin", "round")
-                        .style("opacity", .2);
-                
+                        .attr("d", this.drawCluster)
+                        .style("fill", "#60df20")
+                        .style("opacity", .2)
+                        .on("click", function(d) {
+                            alert(d.id);
+                        });
-                this.svg.selectAll(".link").data(this.graph.links).remove();
-                this.svgLinks = this.svg.selectAll(".link").data(this.graph.links).enter()
+
+                this.svg.selectAll(".link").data(net.links).remove();
+                this.svgLinks = this.svg.selectAll(".link").data(net.links).enter()
                         .append("line")
                         .attr("class", "link")
-                    /* .attr("x1", function(d) { return d.source.x; })
-                     .attr("y1", function(d) { return d.source.y; })
-                     .attr("x2", function(d) { return d.target.x; })
-                     .attr("y2", function(d) { return d.target.y; })*/
-                        .attr("style", function(t){ return "stroke:" + t.color })
-                        .style("stroke-width", function(d) { return d.size || 1; });
-
-                this.svg.selectAll(".node").data(this.graph.nodes).remove();
-                this.svgNodes = this.svg.selectAll(".node").data(this.graph.nodes).enter()
+                        .attr("style", function(t){ return "stroke:#333"; /*+ t.color*/ })
+                        .style("stroke-width", function(d) { return d.size || 0.3; });
+
+                this.svg.selectAll(".node").data(net.nodes).remove();
+                this.svgNodes = this.svg.selectAll(".node").data(net.nodes).enter()
                         .append("g")
                         .on("mouseover", this.mouseover)
                         .on("mouseout", this.mouseout)
                         .attr("class", function (t) { return t.fixed ? "node fixed" : "node"})
                         .attr("name", function (t) { return t.name ? t.name.split(" ").join("_").toLowerCase() : ""})
                         .append("circle")
-                            .on("click", this.active)
-                            .attr("id", function(t){ return t.id })
-                            .attr("class", function (t) { return t.fixed ? "" : "drag"})
-                            .attr("r", function (t){ return t.r ? t.r : 15 })
-                            .attr("style", function (t) { return t.color ? "fill:" + t.color : !1 + "; stroke:white"})
-                            .attr("filter", function(t){return  t.image ? 'url(#filter1)' : ""});
-
-                //d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text);
+                        .on("click", this.active)
+                        .attr("id", function(t){ return t.id })
+                        .attr("class", function (t) { return t.fixed ? "" : "drag"})
+                        .attr("r", function (t){ return t.r ? t.r : 15 })
+                        .attr("style", function (t) {
+                            switch(parseInt(t.sentiment)){
+                                case 1 :
+                                    t.color = "#1F77B4";
+                                    break;
+                                case 2 :
+                                    t.color = "#2CA02C";
+                                    break;
+                                case 3:
+                                    t.color = "#D62728";
+                                    break;
+                                default:
+                                    t.color = "#333";
+                            }
+                            //return t.color ? "fill:" + t.color : !1 + "; stroke:white"
+                            return "fill:" + t.color + "; stroke:white"
+                        })
+                        .attr("filter", function(t){return  t.image ? 'url(#filter1)' : ""});
                 this.svg.style("opacity", 1e-6)
                         .transition()
@@ -355,7 +420,6 @@ Example:
                 //set initial zoom
                 scale = (1.0);
-                //translate = [(width-scale*width)/2, ((height-scale*height)/4)];
                 translate = [0, 0];
                 this.svg.transition()
                         .duration(750)
@@ -382,6 +446,15 @@ Example:
                         .append("feImage")
                         .attr("xlink:href","http://icons.iconarchive.com/icons/hopstarter/soft-scraps/256/User-Executive-Green-icon.png");
+                for (var i = 0; i < this.graph.links.length; ++i) {
+                    o = this.graph.links[i];
+                    o.source = this.graph.nodes[o.source];
+                    o.target = this.graph.nodes[o.target];
+                }
+
+                this.hullg = this.svg.append("g");
+
+                this.getGroups();
                 this.init();
             },
@@ -400,57 +473,55 @@ Example:
             },
             tick : function () {
-                // d3.select("svg").attr("style", "transform:translate(8%)");
-                d3.selectAll("g foreignObject").attr("x", function (t) {
-                    return t.x + (t.r ? 0.8 * t.r : 15)
-                }).attr("y", function (t) {
-                    return t.y - 20
-                });
-
-                d3.selectAll("#logo text").attr("x", function (t) {
-                    return t.x + .7 * (t.r ? t.r : 15)
-                }).attr("y", function (t) {
-                    return t.y
-                });
-
-                _this.svgNodes.attr("cx", function (t) {
-                    return t.x = Math.max(25, Math.min(_this.width - 50, t.x))
-                }).attr("cy", function (t) {
-                    return t.y = Math.max(8, Math.min(600, t.y))
-                });
-
-                _this.svgLinks.attr("x1", function (t) {
-                    return t.source.x
-                }).attr("y1", function (t) {
-                    return t.source.y
-                }).attr("x2", function (t) {
-                    return t.target.x
-                }).attr("y2", function (t) {
-                    return t.target.y
-                });
-
-                //create hulls
-                //var n = [{key : "0", values : [ _this.graph.nodes[14],  _this.graph.nodes[15], _this.graph.nodes[16],_this.graph.nodes[17], _this.graph.nodes[18]]}];
+                if(_this.hull != undefined) {
+                    if (!_this.hull.empty()) {
+                        _this.hull.data(_this.convexHulls)
+                                .style("fill", function (d) {
+                                    return _this.fill(d.sentiment);
+                                })
+                                .attr("d", _this.drawCluster);
+                    }
-                //_this.createHulls([_this.hulls[2]]);
-                //_this.createHulls(_this.hulls);
-                var vertices = [];
-                for(var i=0; i < _this.groups[0][0].values.length;i++){
-                   vertices.push([_this.groups[0][0].values[i].x, _this.groups[0][0].values[i].y]);
+                    d3.selectAll("g foreignObject").attr("x", function (t) {
+                        return t.x + (t.r ? 0.8 * t.r : 15)
+                    }).attr("y", function (t) {
+                        return t.y - 20
+                    });
+
+                    d3.selectAll("#logo text").attr("x", function (t) {
+                        return t.x + .7 * (t.r ? t.r : 15)
+                    }).attr("y", function (t) {
+                        return t.y
+                    });
+
+                    _this.svgNodes.attr("cx", function (t) {
+                        return t.x = Math.max(25, Math.min(_this.width - 50, t.x))
+                    }).attr("cy", function (t) {
+                        return t.y = Math.max(8, Math.min(600, t.y))
+                    });
+
+                    _this.svgLinks.attr("x1", function (t) {
+                        return t.source.x
+                    }).attr("y1", function (t) {
+                        return t.source.y
+                    }).attr("x2", function (t) {
+                        return t.target.x
+                    }).attr("y2", function (t) {
+                        return t.target.y
+                    });
                 }
-                _this.hull.datum(d3.geom.hull(vertices)).attr("d", function(d) { return "M" + d.join("L") + "Z"; });
+
             },
             mouseover : function (t) {
                 d3.select(this).selectAll("circle").transition().duration(600).ease("elastic").attr("r", function (t) {
-                    //return 1 == t.fixed ? 1.4 * t.r : 15
                     return 1 == t.fixed ? 1.4 * t.r : t.r + 10;
                 });
                 _this.$.dialog.close();
                 _this.$.dialog_title.innerHTML   = t.name;
-                _this.$.dialog_content.innerHTML = t.content;
+                _this.$.dialog_content.innerHTML = t.nodes ? t.nodes.length : 1;
                 _this.$.dialog.open();
             },
@@ -464,23 +535,24 @@ Example:
             active : function (t) {
-                _this.init();
-                _this.fire('graph-datalet_node-clicked', {node : t});
+                if(t.extend == undefined)
+                {
+                    _this.init();
+                    _this.fire('graph-datalet_node-clicked', {node : t});
-                if(_this.prev_selected_node != null){
-                    _this.prev_selected_node.style.fill = _this.prev_selected_node.style.stroke;
-                    _this.prev_selected_node.style.stroke = "#FFFFFF";
-                }
-
-                _this.prev_selected_node = document.getElementById("" + t.id);
-                _this.prev_selected_node.style.fill   = "#FFFFFF"
-                _this.prev_selected_node.style.stroke = t.color;
-
-                /* _this.$.dialog.close();
-                 _this.$.dialog_title.innerHTML   = t.name;
-                 _this.$.dialog_content.innerHTML = t.content;
+                    if(_this.prev_selected_node != null){
+                        _this.prev_selected_node.style.fill = _this.prev_selected_node.style.stroke;
+                        _this.prev_selected_node.style.stroke = "#FFFFFF";
+                    }
-                 _this.$.dialog.open();*/
+                    _this.prev_selected_node = document.getElementById("" + t.id);
+                    _this.prev_selected_node.style.fill   = "#FFFFFF"
+                    _this.prev_selected_node.style.stroke = t.color;
+                }else{
+                   var gids = t.id.split("-");
+                    _this.groups[gids[0]][gids[1]].extend = true;
+                    _this.init();
+                }
             },
             _onCloseClick : function(){
@@ -505,9 +577,9 @@ Example:
                     width: "100%",
                     height: "100%"
                 }).attr("viewBox", "0 0 " + this.width + " " + this.height)
-                  .attr("pointer-events", "all")
+                        .attr("pointer-events", "all")
                         .attr("style", "transform:translate(0px)")
-                  .style("position", "absolute");
+                        .style("position", "absolute");
                 this.buildGraph();
             }