--- /dev/null
+/*
+ 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.category10();
+
+var svg = d3.select("#table_graph").append("svg")
+ .attr("width", width)
+ .attr("height", height);
+
+var force = d3.layout.force()
+ .gravity(0.05)
+ .distance(100)
+ .charge(-100)
+ .size([width, height])
+ .on("tick", tick);
+
+var drag = force.drag()
+ .on("dragstart", dragstart);
+
+d3.json("/restapi/network/d3jsgraph", function(error, json) {
+ if (error) throw error;
+
+ force
+ .nodes(json.nodes)
+ .links(json.links)
+ .start();
+
+ var link = svg.selectAll(".link")
+ .data(json.links)
+ .enter().append("line")
+ .attr("class", "link");
+
+ var node = svg.selectAll(".node")
+ .data(json.nodes)
+ .enter().append("g")
+ .attr("class", "node")
+ .call(drag);
+
+ node.append("circle")
+ .attr("r", 10)
+ .style("fill", function(d) { return color(d.group); });
+
+ node.append("text")
+ .attr("dx", 12)
+ .attr("dy", ".35em")
+ .text(function(d) { return d.name });
+
+ force.on("tick", function() {
+ 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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
+ });
+
+
+});