forcegraph.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  1. define(["d3"], function (d3) {
  2. return function (linkScale, sidebar, router) {
  3. var self = this
  4. var nodes, links
  5. var svg, vis, link, node
  6. var nodesDict, linksDict
  7. var zoomBehavior
  8. var force
  9. var el
  10. var doAnimation = false
  11. var LINK_DISTANCE = 70
  12. function graphDiameter(nodes) {
  13. return Math.sqrt(nodes.length / Math.PI) * LINK_DISTANCE
  14. }
  15. function savePositions() {
  16. if (!localStorageTest())
  17. return
  18. var save = nodes.map( function (d) {
  19. return { id: d.id, x: d.x, y: d.y }
  20. })
  21. localStorage.setItem("graph/nodeposition", JSON.stringify(save))
  22. }
  23. function nodeName(d) {
  24. if (d.node && d.node.nodeinfo)
  25. return d.node.nodeinfo.hostname
  26. else
  27. return d.id
  28. }
  29. function dragstart(d) {
  30. d3.event.sourceEvent.stopPropagation()
  31. d.fixed |= 2
  32. }
  33. function dragmove(d) {
  34. d.px = d3.event.x
  35. d.py = d3.event.y
  36. force.resume()
  37. }
  38. function dragend(d) {
  39. d3.event.sourceEvent.stopPropagation()
  40. d.fixed &= 1
  41. }
  42. function animatePanzoom(translate, scale) {
  43. zoomBehavior.scale(scale)
  44. zoomBehavior.translate(translate)
  45. var el = vis
  46. if (doAnimation)
  47. el = el.transition().duration(500)
  48. el.attr("transform", "translate(" + translate + ") " +
  49. "scale(" + scale + ")")
  50. }
  51. function panzoom() {
  52. var translate = zoomBehavior.translate()
  53. var scale = zoomBehavior.scale()
  54. vis.attr("transform", "translate(" + translate + ") " +
  55. "scale(" + scale + ")")
  56. }
  57. function getSize() {
  58. var sidebarWidth = sidebar.getWidth()
  59. var width = el.offsetWidth - sidebarWidth
  60. var height = el.offsetHeight
  61. return [width, height]
  62. }
  63. function panzoomTo(a, b) {
  64. var sidebarWidth = sidebar.getWidth()
  65. var size = getSize()
  66. var targetWidth = Math.max(1, b[0] - a[0])
  67. var targetHeight = Math.max(1, b[1] - a[1])
  68. var scaleX = size[0] / targetWidth
  69. var scaleY = size[1] / targetHeight
  70. var scaleMax = zoomBehavior.scaleExtent()[1]
  71. var scale = 0.5 * Math.min(scaleMax, Math.min(scaleX, scaleY))
  72. var centroid = [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2]
  73. var x = -centroid[0] * scale + size[0] / 2
  74. var y = -centroid[1] * scale + size[1] / 2
  75. var translate = [x + sidebarWidth, y]
  76. animatePanzoom(translate, scale)
  77. }
  78. function tickEvent() {
  79. link.selectAll("line")
  80. .attr("x1", function(d) { return d.source.x })
  81. .attr("y1", function(d) { return d.source.y })
  82. .attr("x2", function(d) { return d.target.x })
  83. .attr("y2", function(d) { return d.target.y })
  84. node
  85. .attr("cx", function(d) { return d.x })
  86. .attr("cy", function(d) { return d.y })
  87. }
  88. el = document.createElement("div")
  89. el.classList.add("graph")
  90. self.div = el
  91. zoomBehavior = d3.behavior.zoom()
  92. .scaleExtent([1 / 3, 3])
  93. .on("zoom", panzoom)
  94. .translate([sidebar.getWidth(), 0])
  95. svg = d3.select(el).append("svg")
  96. .attr("pointer-events", "all")
  97. .call(zoomBehavior)
  98. vis = svg.append("g")
  99. vis.append("g").attr("class", "links")
  100. vis.append("g").attr("class", "nodes")
  101. force = d3.layout.force()
  102. .charge(-70)
  103. .gravity(0.05)
  104. .linkDistance(LINK_DISTANCE)
  105. .linkStrength(function (d) {
  106. return 1 / d.tq
  107. })
  108. .on("tick", tickEvent)
  109. .on("end", savePositions)
  110. panzoom()
  111. var draggableNode = d3.behavior.drag()
  112. .on("dragstart", dragstart)
  113. .on("drag", dragmove)
  114. .on("dragend", dragend)
  115. self.setData = function (data) {
  116. var nodePositions = {}
  117. if (localStorageTest()) {
  118. var save = JSON.parse(localStorage.getItem("graph/nodeposition"))
  119. if (save)
  120. save.forEach( function (d) {
  121. nodePositions[d.id] = d
  122. })
  123. }
  124. links = data.graph.links.filter( function (d) {
  125. return !d.vpn
  126. })
  127. link = vis.select("g.links")
  128. .selectAll("g.link")
  129. .data(links, linkId)
  130. var linkEnter = link.enter().append("g")
  131. .attr("class", "link")
  132. .on("click", function (d) {
  133. if (!d3.event.defaultPrevented)
  134. router.link(d)()
  135. })
  136. linkEnter.append("line")
  137. .append("title")
  138. link.selectAll("line")
  139. .style("stroke", function (d) { return linkScale(d.tq) })
  140. link.selectAll("title").text(showTq)
  141. linksDict = {}
  142. link.each( function (d) {
  143. if (d.source.node && d.target.node)
  144. linksDict[linkId(d)] = d
  145. })
  146. nodes = data.graph.nodes
  147. node = vis.select("g.nodes")
  148. .selectAll(".node")
  149. .data(nodes,
  150. function(d) {
  151. return d.id
  152. }
  153. )
  154. var nodeEnter = node.enter().append("circle")
  155. .attr("r", 8)
  156. .on("click", function (d) {
  157. if (!d3.event.defaultPrevented)
  158. router.node(d.node)()
  159. })
  160. .call(draggableNode)
  161. node.attr("class", function (d) {
  162. var s = ["node"]
  163. if (!d.node)
  164. s.push("unknown")
  165. return s.join(" ")
  166. })
  167. nodesDict = {}
  168. node.each( function (d) {
  169. if (d.node)
  170. nodesDict[d.node.nodeinfo.node_id] = d
  171. })
  172. nodeEnter.append("title")
  173. nodeEnter.each( function (d) {
  174. if (nodePositions[d.id]) {
  175. d.x = nodePositions[d.id].x
  176. d.y = nodePositions[d.id].y
  177. }
  178. })
  179. node.selectAll("title").text(nodeName)
  180. var diameter = graphDiameter(nodes)
  181. force.nodes(nodes)
  182. .links(links)
  183. .size([diameter, diameter])
  184. .start()
  185. }
  186. self.resetView = function () {
  187. node.classed("highlight", false)
  188. link.classed("highlight", false)
  189. panzoomTo([0, 0], force.size())
  190. doAnimation = true
  191. }
  192. self.gotoNode = function (d) {
  193. link.classed("highlight", false)
  194. node.classed("highlight", function (e) {
  195. return e.node === d && d !== undefined
  196. })
  197. var n = nodesDict[d.nodeinfo.node_id]
  198. if (n)
  199. panzoomTo([n.x, n.y], [n.x, n.y])
  200. doAnimation = true
  201. }
  202. self.gotoLink = function (d) {
  203. node.classed("highlight", false)
  204. link.classed("highlight", function (e) {
  205. return e === d && d !== undefined
  206. })
  207. var l = linksDict[linkId(d)]
  208. if (l) {
  209. var x = d3.extent([l.source, l.target], function (d) { return d.x })
  210. var y = d3.extent([l.source, l.target], function (d) { return d.y })
  211. panzoomTo([x[0], y[0]], [x[1], y[1]])
  212. }
  213. doAnimation = true
  214. }
  215. self.destroy = function () {
  216. force.stop()
  217. node.remove()
  218. link.remove()
  219. svg.remove()
  220. force = null
  221. svg = null
  222. vis = null
  223. link = null
  224. node = null
  225. }
  226. return self
  227. }
  228. })