src/emuvim/dashboard/js/graph.js

   1 var width = 960,
   2     height = 500,
   3     color = d3.scale.category10();
   4
   5 var svg = d3.select("#table_graph").append("svg")
   6     .attr("width", width)
   7     .attr("height", height);
   8
   9 var force = d3.layout.force()
  10     .gravity(0.05)
  11     .distance(100)
  12     .charge(-100)
  13     .size([width, height]);
  14
  15 d3.json("http://127.0.0.1:5001/restapi/network/d3jsgraph", function(error, json) {
  16   if (error) throw error;
  17
  18   force
  19       .nodes(json.nodes)
  20       .links(json.links)
  21       .start();
  22
  23   var link = svg.selectAll(".link")
  24       .data(json.links)
  25     .enter().append("line")
  26       .attr("class", "link");
  27
  28   var node = svg.selectAll(".node")
  29       .data(json.nodes)
  30       .enter().append("g")
  31       .attr("class", "node")
  32       .call(force.drag)
  33
  34   node.append("circle")
  35     .attr("r", 10)
  36     .style("fill", function(d) { return color(d.group); });
  37
  38   node.append("text")
  39       .attr("dx", 12)
  40       .attr("dy", ".35em")
  41       .text(function(d) { return d.name });
  42
  43   force.on("tick", function() {
  44     link.attr("x1", function(d) { return d.source.x; })
  45         .attr("y1", function(d) { return d.source.y; })
  46         .attr("x2", function(d) { return d.target.x; })
  47         .attr("y2", function(d) { return d.target.y; });
  48
  49     node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  50   });
  51
  52
  53 });