diff --git a/datalets/graph-datalet/graph-datalet.html b/datalets/graph-datalet/graph-datalet.html
index 6726077..09b7625 100644
--- a/datalets/graph-datalet/graph-datalet.html
+++ b/datalets/graph-datalet/graph-datalet.html
@@ -31,7 +31,6 @@
<link rel="import" href="../base-datalet/base-datalet.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
-<link rel="import" href="../../bower_components/paper-slider/paper-slider.html">
<!--
`preview-datalet` is a datalet that allow user to preview the content of a web page. It creates a thumbnail of the site using the data-url attribute passed as input.
@@ -54,32 +53,26 @@ Example:
<link rel="stylesheet" href="static/css/graphStyle.css">
<style is="custom-style">
- .content {
- /*width: 50%;*/
- margin: 0px auto;
- }
</style>
- <div class="layout vertical">
- <div id="toolbar">
- <paper-slider min="900" max="1500" value="{{width}}"></paper-slider>
- </div>
- <div style="align-content: center;" id="graph-content">
- <svg id="sbiricuda"></svg>
- </div>
- </div>
-
- <base-datalet id="base" data-url="{{dataUrl}}"></base-datalet>
+ <div style="align-content: center;" id="graph_content">
+ <svg id="sbiricuda"></svg>
+ </div>
</template>
<script src="static/js/d3.v3.js"></script>
- <script src="static/js/buildGraph.js"></script>
<script>
- var _this;
+ gnodes = [];
+ glinks = [];
+
+ width = undefined;
+ height = undefined;
+ svg = undefined;
+ _this = null;
Polymer({
is : 'graph-datalet',
@@ -99,8 +92,7 @@ Example:
width: {
type: Number,
- value: undefined,
- observer : '_widthChanged'
+ value: 1250
},
height : {
@@ -111,20 +103,20 @@ Example:
svg: {
type: Object,
value: undefined
- },
+ }
+ },
- gnodes:{
- type: Array,
- value: undefined
- },
+ buildGraph: function (t){
- glinks:{
- type: Array,
- value: undefined
- },
- },
+ this.svg = this.svg.append("g")
+ .call(d3.behavior.zoom().scaleExtent([.25, 20]).on("zoom", this.zoom))
+ .append("g");
+
+ this.svg.append("rect")
+ .attr("fill", "white")
+ .attr("width", width)
+ .attr("height", height);
- /* buildGraph: function (t){
var graph = {};
graph.nodes = t.nodes;
@@ -135,24 +127,35 @@ Example:
return t.value ? t.value : 80
}).on("tick", this.tick).start();
- this.glinks = this.svg.selectAll(".link").data(graph.links).enter().append("line").attr("class", "link");
-
- 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() : ""
- }).on("mouseover", this.mouseover).on("mouseout", this.mouseout).on("click", this.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
- });
+ glinks = this.svg.selectAll(".link").data(graph.links).enter().append("line").attr("class", "link");
+
+ 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() : ""
+ }).on("mouseover", this.mouseover)
+ .on("mouseout", this.mouseout)
+ .on("click", this.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), this.svg.selectAll("g.node").call(this.text);
+ svg = this.svg;
+
+ },
+
+ zoom: function() {
+ svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
},
+
text: function (t)
{
var e = t.append("svg:foreignObject").attr("width", 120).attr("height", 30);
@@ -179,14 +182,13 @@ Example:
});
-
- _this.gnodes.attr("cx", function (t) {
- return t.x = Math.max(25, Math.min(this.width - 50, t.x))
+ gnodes.attr("cx", function (t) {
+ 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))
});
- _this.glinks.attr("x1", function (t) {
+ glinks.attr("x1", function (t) {
return t.source.x
}).attr("y1", function (t) {
return t.source.y
@@ -210,7 +212,8 @@ Example:
},
active : function (t) {
- t.fixed && openModal(t.name)
+ /*t.fixed && openModal(t.name)*/
+ _this.fire('graph-datalet_node-clicked', {node : t});
},
openModal : function(t) {
@@ -218,7 +221,7 @@ Example:
$(".modal-content").hide();
$("." + e).fadeIn();
$("#modal").modal()
- },*/
+ },
/**
* It is called after the element’s template has been stamped and all elements inside the element’s local
@@ -231,47 +234,25 @@ Example:
*
*/
ready: function(){
- width = this.width;
- this.height = 9 * this.width / 16;
- height = this.height;
- 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;
- buildGraph(g);
-
- /* _this = this;
+ _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){
-
- width = this.width;
- this.height = 9 * this.width / 16;
+ width = this.width;
height = this.height;
- svg = d3.select("svg#sbiricuda").attr("class", "svg").attr({
+ this.$.graph_content.style.height = height + "px";
+
+ this.svg = d3.select("svg#sbiricuda").attr("class", "svg").attr({
width: "100%",
height: "100%"
- }).attr("viewBox", "0 0 " + this.width + " " + 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;
+ this.buildGraph(g);
}
});
</script>
diff --git a/datalets/graph-datalet/static/css/graphStyle.css b/datalets/graph-datalet/static/css/graphStyle.css
index 97ffcbe..a84cecc 100644
--- a/datalets/graph-datalet/static/css/graphStyle.css
+++ b/datalets/graph-datalet/static/css/graphStyle.css
@@ -1,4 +1,9 @@
+circle{
+ stroke-width: 2.5px;
+}
+
.text {
+ font-family: 'Roboto', sans-serif;
visibility: hidden
}
@@ -7,6 +12,7 @@
fill: #fff;
stroke: #959595;
stroke-width: 4.5px
+ z-index: 100;
}
.node.fixed {
diff --git a/datalets/graph-datalet/static/js/buildGraph.js b/datalets/graph-datalet/static/js/buildGraph.js
deleted file mode 100644
index 64105df..0000000
--- a/datalets/graph-datalet/static/js/buildGraph.js
+++ /dev/null
@@ -1,141 +0,0 @@
-
-var nodes;
-var links;
-
-function buildGraph(t) {
- 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(.5).linkDistance(function (t)
- {
- return t.value ? t.value : 80
- }).on("tick", tick).start();
-
-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);
-
- 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
- });
-
- //d3.selectAll(".drag").call(force.drag), svg.selectAll("g.fixed").call(text);
- d3.selectAll(".drag").call(force.drag), svg.selectAll("g.node").call(text);
-
- /* 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 + ")");
-}
-
-function text(t) {
- {
- var e = t.append("svg:foreignObject").attr("width", 120).attr("height", 30);
- e.attr("style", function (t) {
- return "color:" + (t.color ? t.color : "#000")
- }).append("xhtml:div").html(function (t) {
- //return t.fixed ? t.name : null
- return t.name;
- })
- }
-}
-
-/*function textS(t) {
- t.append("text").attr("dx", 12).attr("dy", ".35em").text(function (t) {
- return t.name
- })
-}*/
-
-function tick() {
- // d3.select("svg").attr("style", "transform:translate(8%)");
- d3.selectAll("g foreignObject").attr("x", function (t) {
- return t.x + (t.r ? 1.1 * t.r : 15)
- }).attr("y", function (t) {
- return t.y - 35
- });
-
- d3.selectAll("#logo text").attr("x", function (t) {
- return t.x + .7 * (t.r ? t.r : 15)
- }).attr("y", function (t) {
- return t.y
- });
-
- nodes.attr("cx", function (t) {
- 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) {
- 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
- })
-}
-function mouseover(t) {
- d3.select(this).selectAll("circle").transition().duration(600).ease("elastic").attr("r", function (t) {
- return 1 == t.fixed ? 1.4 * t.r : 15
- });
- //$("#sbiricuda").html($("." + t.name.split(" ").join("_").toLowerCase()).html())
-}
-function mouseout() {
- d3.select(this).selectAll("text").style("visibility", "hidden"), d3.select(this).selectAll("circle").transition().duration(400).attr("r", function (t) {
- return t.r ? t.r : 15
- })
-}
-function active(t) {
- t.fixed && openModal(t.name)
-}
-function openModal(t) {
- var e = t.split(" ").join("_").toLowerCase();
- $(".modal-content").hide();
- $("." + e).fadeIn();
- $("#modal").modal()
-}
-/*
-var width = 900;//1250;
-var height = 9 * width / 16, svg, link, node, svg = d3.select("svg#sbiricuda").attr("class", "svg").attr({
- width: "100%",
- height: "100%"
-}).attr("viewBox", "0 0 " + width + " " + height).attr("pointer-events", "all").style("position", "absolute").attr("style", "transform:translate(0px)");*/