X-Git-Url: https://osm.etsi.org/gitweb/?p=osm%2Fvim-emu.git;a=blobdiff_plain;f=src%2Femuvim%2Fdashboard%2Fjs%2Fgraph.js;fp=src%2Femuvim%2Fdashboard%2Fjs%2Fgraph.js;h=01f7e3085b0d49e63c9e4cb4b38b2787234511b3;hp=0000000000000000000000000000000000000000;hb=77524dc7c92cb1c36ada4d0fc99bd2fe985e46f3;hpb=ee28ee3e423fa37f0abc48fc7b96e9830ab9a2fd diff --git a/src/emuvim/dashboard/js/graph.js b/src/emuvim/dashboard/js/graph.js new file mode 100644 index 0000000..01f7e30 --- /dev/null +++ b/src/emuvim/dashboard/js/graph.js @@ -0,0 +1,58 @@ +var width = 960, + height = 500, + color = d3.scale.category20c(); + +var svg = d3.select("body").append("svg") + .attr("width", width) + .attr("height", height); + +var force = d3.layout.force() + .gravity(0.05) + .distance(100) + .charge(-100) + .size([width, height]); + +//d3.json("js/graph.json", function(error, json) { +d3.json("http://127.0.0.1:5001/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(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); + node.append("circle") + .attr("r", 10) + .style("fill", function(d) { return color(d.name); }); + + 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 + ")"; }); + }); +}); \ No newline at end of file