X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;ds=sidebyside;f=src%2Femuvim%2Fdashboard%2Fjs%2Fgraph.js;h=fff88725519a576d2d0f4180e03e04409daa9fa9;hb=d87400255e1997f85b9cdebc583811b70cca4ab7;hp=bc10d39016474cf33f13d77ec0cc86358a87b978;hpb=2542bfaa225f20272df99f1ccab5236326f16070;p=osm%2Fvim-emu.git

diff --git a/src/emuvim/dashboard/js/graph.js b/src/emuvim/dashboard/js/graph.js
index bc10d39..fff8872 100644
--- a/src/emuvim/dashboard/js/graph.js
+++ b/src/emuvim/dashboard/js/graph.js
@@ -1,6 +1,49 @@
+/*
+ Copyright (c) 2017 SONATA-NFV, IMEC and Paderborn University
+ ALL RIGHTS RESERVED.
+ 
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Neither the name of the SONATA-NFV, Paderborn University
+ nor the names of its contributors may be used to endorse or promote
+ products derived from this software without specific prior written
+ permission.
+
+ This work has been performed in the framework of the SONATA project,
+ funded by the European Commission under Grant number 671517 through
+ the Horizon 2020 and 5G-PPP programmes. The authors would like to
+ acknowledge the contributions of their colleagues of the SONATA
+ partner consortium (www.sonata-nfv.eu).
+*/
+
+  //functions to make the nodes stick after they have been manually maoved
+  function tick() {
+    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; });
+
+    node.attr("cx", function(d) { return d.x; })
+      .attr("cy", function(d) { return d.y; });
+  }
+
+  function dragstart(d) {
+     d3.select(this).classed("fixed", d.fixed = true);
+  }
+
 var width = 960,
     height = 500,
-    color = d3.scale.category20c();
+    color = d3.scale.category10();
 
 var svg = d3.select("#table_graph").append("svg")
     .attr("width", width)
@@ -10,10 +53,13 @@ var force = d3.layout.force()
     .gravity(0.05)
     .distance(100)
     .charge(-100)
-    .size([width, height]);
+    .size([width, height])
+    .on("tick", tick);
+
+var drag = force.drag()
+    .on("dragstart", dragstart);
 
-//d3.json("js/graph.json", function(error, json) {
-d3.json("http://127.0.0.1:5001/restapi/network/d3jsgraph", function(error, json) {
+d3.json("/restapi/network/d3jsgraph", function(error, json) {
   if (error) throw error;
 
   force
@@ -23,24 +69,18 @@ d3.json("http://127.0.0.1:5001/restapi/network/d3jsgraph", function(error, json)
 
   var link = svg.selectAll(".link")
       .data(json.links)
-    .enter().append("line")
+      .enter().append("line")
       .attr("class", "link");
 
   var node = svg.selectAll(".node")
       .data(json.nodes)
-    .enter().append("g")
+      .enter().append("g")
       .attr("class", "node")
-      .call(force.drag);
-
-  //node.append("image")
-  //    .attr("xlink:href", "https://github.com/favicon.ico")
-  //    .attr("x", -8)
-  //    .attr("y", -8)
-  //    .attr("width", 16)
-  //    .attr("height", 16);
+      .call(drag);
+
   node.append("circle")
     .attr("r", 10)
-    .style("fill", function(d) { return color(d.name); });
+    .style("fill", function(d) { return color(d.group); });
 
   node.append("text")
       .attr("dx", 12)
@@ -55,4 +95,6 @@ d3.json("http://127.0.0.1:5001/restapi/network/d3jsgraph", function(error, json)
 
     node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
   });
-});
\ No newline at end of file
+
+
+});