From 4f0953cd4af772fa1ccfa6f41302a49e0ef7aab6 Mon Sep 17 00:00:00 2001
From: luigser <luigser@gmail.com>
Date: Thu, 12 Nov 2015 17:42:37 +0100
Subject: [PATCH] graph datalet

---
 datalets/graph-datalet/graph-datalet.html      | 51 ++++++++++++++++++++++++++++++++++++++++++---------
 datalets/graph-datalet/static/js/buildGraph.js | 62 +++++++++++++++++++++++++++++++++++++++++++++++---------------
 2 files changed, 89 insertions(+), 24 deletions(-)

diff --git a/datalets/graph-datalet/graph-datalet.html b/datalets/graph-datalet/graph-datalet.html
index 049b910..6726077 100644
--- a/datalets/graph-datalet/graph-datalet.html
+++ b/datalets/graph-datalet/graph-datalet.html
@@ -65,7 +65,7 @@ Example:
             <div id="toolbar">
                 <paper-slider min="900" max="1500" value="{{width}}"></paper-slider>
             </div>
-            <div style="align-content: center;">
+            <div style="align-content: center;" id="graph-content">
                 <svg id="sbiricuda"></svg>
             </div>
        </div>
@@ -79,6 +79,8 @@ Example:
 
     <script>
 
+        var _this;
+
         Polymer({
             is : 'graph-datalet',
 
@@ -97,7 +99,7 @@ Example:
 
                 width: {
                     type: Number,
-                    value: 900,
+                    value: undefined,
                     observer : '_widthChanged'
                 },
 
@@ -109,10 +111,20 @@ Example:
                 svg: {
                     type: Object,
                     value: undefined
-                }
+                },
+
+                gnodes:{
+                    type: Array,
+                    value: undefined
+                },
+
+                glinks:{
+                    type: Array,
+                    value: undefined
+                },
             },
 
-            /*buildGraph: function (t){
+           /* buildGraph: function (t){
                 var graph = {};
 
                 graph.nodes = t.nodes;
@@ -123,9 +135,9 @@ Example:
                     return t.value ? t.value : 80
                 }).on("tick", this.tick).start();
 
-                links = this.svg.selectAll(".link").data(graph.links).enter().append("line").attr("class", "link");
+                this.glinks = this.svg.selectAll(".link").data(graph.links).enter().append("line").attr("class", "link");
 
-                nodes = this.svg.selectAll(".node").data(graph.nodes).enter().append("g").attr("class", function (t) {
+                this.gnodes = this.svg.selectAll(".node").data(graph.nodes).enter().append("g").attr("class", function (t) {
                     return t.fixed ? "node fixed" : "node"
                 }).attr("name", function (t) {
                     return t.name ? t.name.split(" ").join("_").toLowerCase() : ""
@@ -166,11 +178,15 @@ Example:
                     return t.y
                 });
 
-                nodes.attr("cx", function (t) {
+
+
+                _this.gnodes.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))
-                }), links.attr("x1", function (t) {
+                });
+
+                _this.glinks.attr("x1", function (t) {
                     return t.source.x
                 }).attr("y1", function (t) {
                     return t.source.y
@@ -221,12 +237,25 @@ Example:
                 svg = d3.select("svg#sbiricuda").attr("class", "svg").attr({
                     width: "100%",
                     height: "100%"
-                }).attr("viewBox", "0 0 " + this.width + " " + this.height).attr("pointer-events", "all").style("position", "absolute").attr("style", "transform:translate(0px)");
+                })//.attr("viewBox", "0 0 " + this.width + " " + this.height).attr("pointer-events", "all").style("position", "absolute").attr("style", "transform:translate(0px)");
 
                 var g = JSON.parse(this.data);
                 g.nodes[0].x = this.width / 2;
                 g.nodes[0].y = this.height / 2;
                 buildGraph(g);
+
+               /* _this = this;
+
+                this.height = 9 * this.width / 16;
+                this.svg = d3.select("svg#sbiricuda").attr("class", "svg").attr({
+                    width: "100%",
+                    height: "100%"
+                }).attr("viewBox", "0 0 " + this.width + " " + this.height).attr("pointer-events", "all").style("position", "absolute").attr("style", "transform:translate(0px)");
+
+                var g = JSON.parse(this.data);
+                g.nodes[0].x = this.width / 2;
+                g.nodes[0].y = this.height / 2;
+                this.buildGraph(g);*/
             },
 
             _widthChanged: function(oldValue, newValue){
@@ -239,6 +268,10 @@ Example:
                     width: "100%",
                     height: "100%"
                 }).attr("viewBox", "0 0 " + this.width + " " + height).attr("pointer-events", "all").style("position", "absolute").attr("style", "transform:translate(0px)");
+
+                var g = JSON.parse(this.data);
+                g.nodes[0].x = this.width / 2;
+                g.nodes[0].y = this.height / 2;
             }
         });
     </script>
diff --git a/datalets/graph-datalet/static/js/buildGraph.js b/datalets/graph-datalet/static/js/buildGraph.js
index 970c0e9..64105df 100644
--- a/datalets/graph-datalet/static/js/buildGraph.js
+++ b/datalets/graph-datalet/static/js/buildGraph.js
@@ -1,36 +1,66 @@
+
+var nodes;
+var links;
+
 function buildGraph(t) {
-           var graph = {};
+            var graph = {};
 
             graph.nodes = t.nodes;
             graph.links = t.links;
 
-            force = d3.layout.force().nodes(graph.nodes).links(graph.links).size([width, height]).charge(-1e3).friction(.7).linkDistance(function (t)
+            force = d3.layout.force().nodes(graph.nodes).links(graph.links).size([width, height]).charge(-1e3).friction(.5).linkDistance(function (t)
             {
                 return t.value ? t.value : 80
             }).on("tick", tick).start();
 
-            links = svg.selectAll(".link").data(graph.links).enter().append("line").attr("class", "link");
+svg=svg.append("g")
+        .call(d3.behavior.zoom().scaleExtent([.25, 20]).on("zoom", zoom))
+        .append("g");
+
+    svg.append("rect")
+        .attr("fill", "white")
+        .attr("width", width)
+        .attr("height", height);
 
-            nodes = svg.selectAll(".node").data(graph.nodes).enter().append("g").attr("class", function (t) {
+    links = svg.selectAll(".link").data(graph.links).enter().append("line").attr("class", "link");
+
+            nodes = svg.selectAll(".node").data(graph.nodes).enter().append("g")
+                .attr("class", function (t) {
                     return t.fixed ? "node fixed" : "node"
                 }).attr("name", function (t) {
                     return t.name ? t.name.split(" ").join("_").toLowerCase() : ""
-                }).on("mouseover", mouseover).on("mouseout", mouseout).on("click", active).append("circle").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 ? "stroke:" + t.color : !1
-                });
+                }).on("mouseover", mouseover).on("mouseout", mouseout).on("click", active)
+                   .append("circle")
+                       .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 ? "stroke:" + t.color : !1
+                       });
 
             //d3.selectAll(".drag").call(force.drag), svg.selectAll("g.fixed").call(text);
             d3.selectAll(".drag").call(force.drag), svg.selectAll("g.node").call(text);
 
-            svg.call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom));
-            svg.selectAll(".node").attr("transform", function(d) { return "translate(" + d + ")"; });
-            svg.selectAll(".link").attr("transform", function(d) { return "translate(" + d + ")"; });
+           /* d3.selectAll("circle").attr("transform", function(t) {
+                return "translate(" + t.x + "," + t.y + ")";
+            });*/
+            //d3.selectAll("circle").attr("transform", function(t) {
+            //            return "translate(" + t + ")";
+            //        });
 
 }
+
+function destroyGraph(){
+    nodes.remove();
+    links.remove();
+    svg.remove();
+    nodes = [];
+    links = [];
+}
+
 function zoom() {
     svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
 }
@@ -71,7 +101,9 @@ function tick() {
         return t.x = Math.max(25, Math.min(width - 50, t.x))
     }).attr("cy", function (t) {
         return t.y = Math.max(8, Math.min(600, t.y))
-    }), links.attr("x1", function (t) {
+    });
+
+    links.attr("x1", function (t) {
         return t.source.x
     }).attr("y1", function (t) {
         return t.source.y
--
libgit2 0.21.4