Blame view

datalets/graph-datalet/static/js/buildGraph.js 4.14 KB
ce4b5fb1   Luigi Serra   graph-datalet
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
  function buildGraph(t) {

             var graph = {};

  

              graph.nodes = t.nodes;

              graph.links = t.links;

  

              force = d3.layout.force().nodes(graph.nodes).links(graph.links).size([width, height]).charge(-1e3).friction(.7).linkDistance(function (t)

              {

                  return t.value ? t.value : 80

              }).on("tick", tick).start();

  

              links = svg.selectAll(".link").data(graph.links).enter().append("line").attr("class", "link");

  

              nodes = svg.selectAll(".node").data(graph.nodes).enter().append("g").attr("class", function (t) {

                      return t.fixed ? "node fixed" : "node"

                  }).attr("name", function (t) {

                      return t.name ? t.name.split(" ").join("_").toLowerCase() : ""

                  }).on("mouseover", mouseover).on("mouseout", mouseout).on("click", active).append("circle").attr("class", function (t) {

                      return t.fixed ? "" : "drag"

                  }).attr("r", function (t) {

                      return t.r ? t.r : 15

                  }).attr("style", function (t) {

                      return t.color ? "stroke:" + t.color : !1

                  });

  

              //d3.selectAll(".drag").call(force.drag), svg.selectAll("g.fixed").call(text);

              d3.selectAll(".drag").call(force.drag), svg.selectAll("g.node").call(text);

  

              svg.call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom));

              svg.selectAll(".node").attr("transform", function(d) { return "translate(" + d + ")"; });

              svg.selectAll(".link").attr("transform", function(d) { return "translate(" + d + ")"; });

  

  }

  function zoom() {

      svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");

  }

  

  function text(t) {

      {

          var e = t.append("svg:foreignObject").attr("width", 120).attr("height", 30);

          e.attr("style", function (t) {

              return "color:" + (t.color ? t.color : "#000")

          }).append("xhtml:div").html(function (t) {

              //return t.fixed ? t.name : null

              return t.name;

          })

      }

  }

  

  /*function textS(t) {

      t.append("text").attr("dx", 12).attr("dy", ".35em").text(function (t) {

          return t.name

      })

  }*/

  

  function tick() {

     // d3.select("svg").attr("style", "transform:translate(8%)");

      d3.selectAll("g foreignObject").attr("x", function (t) {

          return t.x + (t.r ? 1.1 * t.r : 15)

      }).attr("y", function (t) {

          return t.y - 35

      });

  

      d3.selectAll("#logo text").attr("x", function (t) {

          return t.x + .7 * (t.r ? t.r : 15)

      }).attr("y", function (t) {

          return t.y

      });

  

      nodes.attr("cx", function (t) {

          return t.x = Math.max(25, Math.min(width - 50, t.x))

      }).attr("cy", function (t) {

          return t.y = Math.max(8, Math.min(600, t.y))

      }), links.attr("x1", function (t) {

          return t.source.x

      }).attr("y1", function (t) {

          return t.source.y

      }).attr("x2", function (t) {

          return t.target.x

      }).attr("y2", function (t) {

          return t.target.y

      })

  }

  function mouseover(t) {

      d3.select(this).selectAll("circle").transition().duration(600).ease("elastic").attr("r", function (t) {

          return 1 == t.fixed ? 1.4 * t.r : 15

      });

      //$("#sbiricuda").html($("." + t.name.split(" ").join("_").toLowerCase()).html())

  }

  function mouseout() {

      d3.select(this).selectAll("text").style("visibility", "hidden"), d3.select(this).selectAll("circle").transition().duration(400).attr("r", function (t) {

          return t.r ? t.r : 15

      })

  }

  function active(t) {

      t.fixed && openModal(t.name)

  }

  function openModal(t) {

      var e = t.split(" ").join("_").toLowerCase();

      $(".modal-content").hide();

      $("." + e).fadeIn();

      $("#modal").modal()

  }

  /*

  var width = 900;//1250;

  var height = 9 * width / 16, svg, link, node, svg = d3.select("svg#sbiricuda").attr("class", "svg").attr({

      width: "100%",

      height: "100%"

  }).attr("viewBox", "0 0 " + width + " " + height).attr("pointer-events", "all").style("position", "absolute").attr("style", "transform:translate(0px)");*/