src/emuvim/dashboard/js/graph.js

   1 var width = 960,
   2     height = 500,
   3     color = d3.scale.category20c();
   4
   5 var svg = d3.select("body").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("js/graph.json", function(error, json) {
  16 d3.json("http://127.0.0.1:5001/restapi/network/d3jsgraph", function(error, json) {
  17   if (error) throw error;
  18
  19   force
  20       .nodes(json.nodes)
  21       .links(json.links)
  22       .start();
  23
  24   var link = svg.selectAll(".link")
  25       .data(json.links)
  26     .enter().append("line")
  27       .attr("class", "link");
  28
  29   var node = svg.selectAll(".node")
  30       .data(json.nodes)
  31     .enter().append("g")
  32       .attr("class", "node")
  33       .call(force.drag);
  34
  35   //node.append("image")
  36   //    .attr("xlink:href", "https://github.com/favicon.ico")
  37   //    .attr("x", -8)
  38   //    .attr("y", -8)
  39   //    .attr("width", 16)
  40   //    .attr("height", 16);
  41   node.append("circle")
  42     .attr("r", 10)
  43     .style("fill", function(d) { return color(d.name); });
  44
  45   node.append("text")
  46       .attr("dx", 12)
  47       .attr("dy", ".35em")
  48       .text(function(d) { return d.name });
  49
  50   force.on("tick", function() {
  51     link.attr("x1", function(d) { return d.source.x; })
  52         .attr("y1", function(d) { return d.source.y; })
  53         .attr("x2", function(d) { return d.target.x; })
  54         .attr("y2", function(d) { return d.target.y; });
  55
  56     node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  57   });
  58 });