4
0

forcegraph.js 8.7 KB

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