forcegraph.js 7.4 KB

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