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