4
0

forcegraph.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752
  1. define(["d3"], function (d3) {
  2. var margin = 200
  3. var NODE_RADIUS = 15
  4. var LINE_RADIUS = 12
  5. return function (config, linkScale, sidebar, router) {
  6. var self = this
  7. var canvas, ctx, screenRect
  8. var nodesDict, linksDict
  9. var zoomBehavior
  10. var force
  11. var el
  12. var doAnimation = false
  13. var intNodes = []
  14. var intLinks = []
  15. var highlight
  16. var highlightedNodes = []
  17. var highlightedLinks = []
  18. var nodes = []
  19. var unknownNodes = []
  20. var savedPanZoom
  21. var draggedNode
  22. var LINK_DISTANCE = 70
  23. function graphDiameter(nodes) {
  24. return Math.sqrt(nodes.length / Math.PI) * LINK_DISTANCE * 1.41
  25. }
  26. function savePositions() {
  27. if (!localStorageTest())
  28. return
  29. var save = intNodes.map( function (d) {
  30. return { id: d.o.id, x: d.x, y: d.y }
  31. })
  32. localStorage.setItem("graph/nodeposition", JSON.stringify(save))
  33. }
  34. function nodeName(d) {
  35. if (d.o.node && d.o.node.nodeinfo)
  36. return d.o.node.nodeinfo.hostname
  37. else
  38. return d.o.id
  39. }
  40. function dragstart() {
  41. var e = translateXY(d3.mouse(el))
  42. var nodes = intNodes.filter(function (d) {
  43. return distancePoint(e, d) < NODE_RADIUS
  44. })
  45. if (nodes.length === 0)
  46. return
  47. draggedNode = nodes[0]
  48. d3.event.sourceEvent.stopPropagation()
  49. d3.event.sourceEvent.preventDefault()
  50. draggedNode.fixed |= 2
  51. draggedNode.px = draggedNode.x
  52. draggedNode.py = draggedNode.y
  53. }
  54. function dragmove() {
  55. if (draggedNode) {
  56. var e = translateXY(d3.mouse(el))
  57. draggedNode.px = e.x
  58. draggedNode.py = e.y
  59. force.resume()
  60. }
  61. }
  62. function dragend() {
  63. if (draggedNode) {
  64. d3.event.sourceEvent.stopPropagation()
  65. d3.event.sourceEvent.preventDefault()
  66. draggedNode.fixed &= ~2
  67. draggedNode = undefined
  68. }
  69. }
  70. var draggableNode = d3.behavior.drag()
  71. .on("dragstart", dragstart)
  72. .on("drag", dragmove)
  73. .on("dragend", dragend)
  74. function animatePanzoom(translate, scale) {
  75. var translateP = zoomBehavior.translate()
  76. var scaleP = zoomBehavior.scale()
  77. if (!doAnimation) {
  78. zoomBehavior.translate(translate)
  79. zoomBehavior.scale(scale)
  80. panzoom()
  81. } else {
  82. var start = {x: translateP[0], y: translateP[1], scale: scaleP}
  83. var end = {x: translate[0], y: translate[1], scale: scale}
  84. var interpolate = d3.interpolateObject(start, end)
  85. var duration = 500
  86. var ease = d3.ease("cubic-in-out")
  87. d3.timer(function (t) {
  88. if (t >= duration)
  89. return true
  90. var v = interpolate(ease(t / duration))
  91. zoomBehavior.translate([v.x, v.y])
  92. zoomBehavior.scale(v.scale)
  93. panzoom()
  94. return false
  95. })
  96. }
  97. }
  98. function onPanZoom() {
  99. savedPanZoom = {translate: zoomBehavior.translate(),
  100. scale: zoomBehavior.scale()}
  101. panzoom()
  102. }
  103. function panzoom() {
  104. var translate = zoomBehavior.translate()
  105. var scale = zoomBehavior.scale()
  106. panzoomReal(translate, scale)
  107. }
  108. function panzoomReal(translate, scale) {
  109. screenRect = {left: -translate[0] / scale, top: -translate[1] / scale,
  110. right: (canvas.width - translate[0]) / scale,
  111. bottom: (canvas.height - translate[1]) / scale}
  112. requestAnimationFrame(redraw)
  113. }
  114. function getSize() {
  115. var sidebarWidth = sidebar()
  116. var width = el.offsetWidth - sidebarWidth
  117. var height = el.offsetHeight
  118. return [width, height]
  119. }
  120. function panzoomTo(a, b) {
  121. var sidebarWidth = sidebar()
  122. var size = getSize()
  123. var targetWidth = Math.max(1, b[0] - a[0])
  124. var targetHeight = Math.max(1, b[1] - a[1])
  125. var scaleX = size[0] / targetWidth
  126. var scaleY = size[1] / targetHeight
  127. var scaleMax = zoomBehavior.scaleExtent()[1]
  128. var scale = 0.5 * Math.min(scaleMax, Math.min(scaleX, scaleY))
  129. var centroid = [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2]
  130. var x = -centroid[0] * scale + size[0] / 2
  131. var y = -centroid[1] * scale + size[1] / 2
  132. var translate = [x + sidebarWidth, y]
  133. animatePanzoom(translate, scale)
  134. }
  135. function updateHighlight(nopanzoom) {
  136. highlightedNodes = []
  137. highlightedLinks = []
  138. if (highlight !== undefined)
  139. if (highlight.type === "node") {
  140. var n = nodesDict[highlight.o.nodeinfo.node_id]
  141. if (n) {
  142. highlightedNodes = [n]
  143. if (!nopanzoom)
  144. panzoomTo([n.x, n.y], [n.x, n.y])
  145. }
  146. return
  147. } else if (highlight.type === "link") {
  148. var l = linksDict[highlight.o.id]
  149. if (l) {
  150. highlightedLinks = [l]
  151. if (!nopanzoom) {
  152. var x = d3.extent([l.source, l.target], function (d) { return d.x })
  153. var y = d3.extent([l.source, l.target], function (d) { return d.y })
  154. panzoomTo([x[0], y[0]], [x[1], y[1]])
  155. }
  156. }
  157. return
  158. }
  159. if (!nopanzoom)
  160. if (!savedPanZoom)
  161. panzoomTo([0, 0], force.size())
  162. else
  163. animatePanzoom(savedPanZoom.translate, savedPanZoom.scale)
  164. }
  165. function drawLabel(d) {
  166. var neighbours = d.neighbours.filter(function (d) {
  167. return !d.link.o.vpn
  168. })
  169. var sum = neighbours.reduce(function (a, b) {
  170. return [a[0] + b.node.x, a[1] + b.node.y]
  171. }, [0, 0])
  172. var sumCos = sum[0] - d.x * neighbours.length
  173. var sumSin = sum[1] - d.y * neighbours.length
  174. var angle = Math.PI / 2
  175. if (neighbours.length > 0)
  176. angle = Math.PI + Math.atan2(sumSin, sumCos)
  177. var cos = Math.cos(angle)
  178. var sin = Math.sin(angle)
  179. var width = d.labelWidth
  180. var height = d.labelHeight
  181. var x = d.x + d.labelA * Math.pow(Math.abs(cos), 2 / 5) * Math.sign(cos) - width / 2
  182. var y = d.y + d.labelB * Math.pow(Math.abs(sin), 2 / 5) * Math.sign(sin) - height / 2
  183. ctx.drawImage(d.label, x, y, width, height)
  184. }
  185. function visibleLinks(d) {
  186. return (d.source.x > screenRect.left && d.source.x < screenRect.right &&
  187. d.source.y > screenRect.top && d.source.y < screenRect.bottom) ||
  188. (d.target.x > screenRect.left && d.target.x < screenRect.right &&
  189. d.target.y > screenRect.top && d.target.y < screenRect.bottom) ||
  190. d.o.vpn
  191. }
  192. function visibleNodes(d) {
  193. return d.x + margin > screenRect.left && d.x - margin < screenRect.right &&
  194. d.y + margin > screenRect.top && d.y - margin < screenRect.bottom
  195. }
  196. function redraw() {
  197. var r = window.devicePixelRatio
  198. var translate = zoomBehavior.translate()
  199. var scale = zoomBehavior.scale()
  200. var links = intLinks.filter(visibleLinks)
  201. ctx.save()
  202. ctx.setTransform(1, 0, 0, 1, 0, 0)
  203. ctx.clearRect(0, 0, canvas.width, canvas.height)
  204. ctx.restore()
  205. ctx.save()
  206. ctx.translate(translate[0], translate[1])
  207. ctx.scale(scale, scale)
  208. var clientColor = "rgba(230, 50, 75, 1.0)"
  209. var unknownColor = "#D10E2A"
  210. var nodeColor = "#F2E3C6"
  211. var highlightColor = "rgba(252, 227, 198, 0.15)"
  212. var nodeRadius = 6
  213. // -- draw links --
  214. ctx.save()
  215. links.forEach(function (d) {
  216. var dx = d.target.x - d.source.x
  217. var dy = d.target.y - d.source.y
  218. var a = Math.sqrt(dx * dx + dy * dy)
  219. dx /= a
  220. dy /= a
  221. ctx.beginPath()
  222. ctx.moveTo(d.source.x + dx * nodeRadius, d.source.y + dy * nodeRadius)
  223. ctx.lineTo(d.target.x - dx * nodeRadius, d.target.y - dy * nodeRadius)
  224. ctx.strokeStyle = d.color
  225. ctx.globalAlpha = d.o.vpn ? 0.1 : 0.8
  226. ctx.lineWidth = d.o.vpn ? 1.5 : 2.5
  227. ctx.stroke()
  228. })
  229. ctx.restore()
  230. // -- draw unknown nodes --
  231. ctx.beginPath()
  232. unknownNodes.filter(visibleNodes).forEach(function (d) {
  233. ctx.moveTo(d.x + nodeRadius, d.y)
  234. ctx.arc(d.x, d.y, nodeRadius, 0, 2 * Math.PI)
  235. })
  236. ctx.strokeStyle = unknownColor
  237. ctx.lineWidth = nodeRadius
  238. ctx.stroke()
  239. // -- draw nodes --
  240. var node = document.createElement("canvas")
  241. node.width = scale * nodeRadius * 8 * r
  242. node.height = node.width
  243. var nctx = node.getContext("2d")
  244. nctx.scale(scale * r, scale * r)
  245. nctx.save()
  246. nctx.translate(-node.width / scale, -node.height / scale)
  247. nctx.lineWidth = nodeRadius
  248. nctx.beginPath()
  249. nctx.moveTo(nodeRadius, 0)
  250. nctx.arc(0, 0, nodeRadius, 0, 2 * Math.PI)
  251. nctx.strokeStyle = "rgba(255, 0, 0, 1)"
  252. nctx.shadowOffsetX = node.width * 1.5 + 0
  253. nctx.shadowOffsetY = node.height * 1.5 + 3
  254. nctx.shadowBlur = 12
  255. nctx.shadowColor = "rgba(0, 0, 0, 0.16)"
  256. nctx.stroke()
  257. nctx.shadowOffsetX = node.width * 1.5 + 0
  258. nctx.shadowOffsetY = node.height * 1.5 + 3
  259. nctx.shadowBlur = 12
  260. nctx.shadowColor = "rgba(0, 0, 0, 0.23)"
  261. nctx.stroke()
  262. nctx.restore()
  263. nctx.translate(node.width / 2 / scale / r, node.height / 2 / scale / r)
  264. nctx.beginPath()
  265. nctx.moveTo(nodeRadius, 0)
  266. nctx.arc(0, 0, nodeRadius, 0, 2 * Math.PI)
  267. nctx.strokeStyle = nodeColor
  268. nctx.lineWidth = nodeRadius
  269. nctx.stroke()
  270. ctx.save()
  271. ctx.scale(1 / scale / r, 1 / scale / r)
  272. nodes.filter(visibleNodes).forEach(function (d) {
  273. ctx.drawImage(node, scale * r * d.x - node.width / 2, scale * r * d.y - node.height / 2)
  274. })
  275. ctx.restore()
  276. // -- draw clients --
  277. ctx.save()
  278. ctx.beginPath()
  279. nodes.filter(visibleNodes).forEach(function (d) {
  280. var clients = d.o.node.statistics.clients
  281. if (clients === 0)
  282. return
  283. var startDistance = 16
  284. var radius = 3
  285. var a = 1.2
  286. var startAngle = Math.PI
  287. for (var orbit = 0, i = 0; i < clients; orbit++) {
  288. var distance = startDistance + orbit * 2 * radius * a
  289. var n = Math.floor((Math.PI * distance) / (a * radius))
  290. var delta = clients - i
  291. for (var j = 0; j < Math.min(delta, n); i++, j++) {
  292. var angle = 2 * Math.PI / n * j
  293. var x = d.x + distance * Math.cos(angle + startAngle)
  294. var y = d.y + distance * Math.sin(angle + startAngle)
  295. ctx.moveTo(x, y)
  296. ctx.arc(x, y, radius, 0, 2 * Math.PI)
  297. }
  298. }
  299. })
  300. ctx.fillStyle = clientColor
  301. ctx.fill()
  302. ctx.restore()
  303. // -- draw node highlights --
  304. if (highlightedNodes.length) {
  305. ctx.save()
  306. ctx.shadowColor = "rgba(255, 255, 255, 1.0)"
  307. ctx.shadowBlur = 10 * nodeRadius
  308. ctx.shadowOffsetX = 0
  309. ctx.shadowOffsetY = 0
  310. ctx.globalCompositeOperation = "lighten"
  311. ctx.fillStyle = highlightColor
  312. ctx.beginPath()
  313. highlightedNodes.forEach(function (d) {
  314. ctx.moveTo(d.x + 5 * nodeRadius, d.y)
  315. ctx.arc(d.x, d.y, 5 * nodeRadius, 0, 2 * Math.PI)
  316. })
  317. ctx.fill()
  318. ctx.restore()
  319. }
  320. // -- draw link highlights --
  321. if (highlightedLinks.length) {
  322. ctx.save()
  323. ctx.lineWidth = 2 * 5 * nodeRadius
  324. ctx.shadowColor = "rgba(255, 255, 255, 1.0)"
  325. ctx.shadowBlur = 10 * nodeRadius
  326. ctx.shadowOffsetX = 0
  327. ctx.shadowOffsetY = 0
  328. ctx.globalCompositeOperation = "lighten"
  329. ctx.strokeStyle = highlightColor
  330. ctx.lineCap = "round"
  331. ctx.beginPath()
  332. highlightedLinks.forEach(function (d) {
  333. ctx.moveTo(d.source.x, d.source.y)
  334. ctx.lineTo(d.target.x, d.target.y)
  335. })
  336. ctx.stroke()
  337. ctx.restore()
  338. }
  339. // -- draw labels --
  340. if (scale > 0.9)
  341. intNodes.filter(visibleNodes).forEach(drawLabel, scale)
  342. ctx.restore()
  343. }
  344. function tickEvent() {
  345. redraw()
  346. }
  347. function resizeCanvas() {
  348. var r = window.devicePixelRatio
  349. canvas.width = el.offsetWidth * r
  350. canvas.height = el.offsetHeight * r
  351. canvas.style.width = el.offsetWidth + "px"
  352. canvas.style.height = el.offsetHeight + "px"
  353. ctx.setTransform(1, 0, 0, 1, 0, 0)
  354. ctx.scale(r, r)
  355. requestAnimationFrame(redraw)
  356. }
  357. function distance(a, b) {
  358. return Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2)
  359. }
  360. function distancePoint(a, b) {
  361. return Math.sqrt(distance(a, b))
  362. }
  363. function distanceLink(p, a, b) {
  364. /* http://stackoverflow.com/questions/849211 */
  365. var l2 = distance(a, b)
  366. if (l2 === 0)
  367. return distance(p, a)
  368. var t = ((p.x - a.x) * (b.x - a.x) + (p.y - a.y) * (b.y - a.y)) / l2
  369. if (t < 0)
  370. return distance(p, a)
  371. if (t > 1)
  372. return distance(p, b)
  373. return Math.sqrt(distance(p, { x: a.x + t * (b.x - a.x),
  374. y: a.y + t * (b.y - a.y) }))
  375. }
  376. function translateXY(d) {
  377. var translate = zoomBehavior.translate()
  378. var scale = zoomBehavior.scale()
  379. return {x: (d[0] - translate[0]) / scale,
  380. y: (d[1] - translate[1]) / scale
  381. }
  382. }
  383. function onClick() {
  384. if (d3.event.defaultPrevented)
  385. return
  386. var e = translateXY(d3.mouse(el))
  387. var nodes = intNodes.filter(function (d) {
  388. return distancePoint(e, d) < NODE_RADIUS
  389. })
  390. if (nodes.length > 0) {
  391. router.node(nodes[0].o.node)()
  392. return
  393. }
  394. var links = intLinks.filter(function (d) {
  395. return !d.o.vpn
  396. }).filter(function (d) {
  397. return distanceLink(e, d.source, d.target) < LINE_RADIUS
  398. })
  399. if (links.length > 0) {
  400. router.link(links[0].o)()
  401. return
  402. }
  403. }
  404. function zoom(z, scale) {
  405. var size = getSize()
  406. var newSize = [size[0] / scale, size[1] / scale]
  407. var sidebarWidth = sidebar()
  408. var delta = [size[0] - newSize[0], size[1] - newSize[1]]
  409. var translate = z.translate()
  410. var translateNew = [sidebarWidth + (translate[0] - sidebarWidth - delta[0] / 2) * scale, (translate[1] - delta[1] / 2) * scale]
  411. animatePanzoom(translateNew, z.scale() * scale)
  412. }
  413. function keyboardZoom(z) {
  414. return function () {
  415. var e = d3.event
  416. if (e.altKey || e.ctrlKey || e.metaKey)
  417. return
  418. if (e.keyCode === 43)
  419. zoom(z, 1.41)
  420. if (e.keyCode === 45)
  421. zoom(z, 1 / 1.41)
  422. }
  423. }
  424. el = document.createElement("div")
  425. el.classList.add("graph")
  426. zoomBehavior = d3.behavior.zoom()
  427. .scaleExtent([1 / 3, 3])
  428. .on("zoom", onPanZoom)
  429. .translate([sidebar(), 0])
  430. canvas = d3.select(el)
  431. .attr("tabindex", 1)
  432. .on("keypress", keyboardZoom(zoomBehavior))
  433. .call(zoomBehavior)
  434. .append("canvas")
  435. .on("click", onClick)
  436. .call(draggableNode)
  437. .node()
  438. ctx = canvas.getContext("2d")
  439. force = d3.layout.force()
  440. .charge(-250)
  441. .gravity(0.1)
  442. .linkDistance(function (d) {
  443. if (d.o.vpn)
  444. return 0
  445. else
  446. return LINK_DISTANCE
  447. })
  448. .linkStrength(function (d) {
  449. if (d.o.vpn)
  450. return 0
  451. else
  452. return Math.max(0.5, 1 / d.o.tq)
  453. })
  454. .on("tick", tickEvent)
  455. .on("end", savePositions)
  456. window.addEventListener("resize", resizeCanvas)
  457. panzoom()
  458. self.setData = function (data) {
  459. var oldNodes = {}
  460. intNodes.forEach( function (d) {
  461. oldNodes[d.o.id] = d
  462. })
  463. intNodes = data.graph.nodes.map( function (d) {
  464. var e
  465. if (d.id in oldNodes)
  466. e = oldNodes[d.id]
  467. else
  468. e = {}
  469. e.o = d
  470. return e
  471. })
  472. var newNodesDict = {}
  473. intNodes.forEach( function (d) {
  474. newNodesDict[d.o.id] = d
  475. })
  476. var oldLinks = {}
  477. intLinks.forEach( function (d) {
  478. oldLinks[d.o.id] = d
  479. })
  480. intLinks = data.graph.links.map( function (d) {
  481. var e
  482. if (d.id in oldLinks)
  483. e = oldLinks[d.id]
  484. else
  485. e = {}
  486. e.o = d
  487. e.source = newNodesDict[d.source.id]
  488. e.target = newNodesDict[d.target.id]
  489. if (d.vpn)
  490. e.color = "rgba(255, 255, 255, " + (0.6 / d.tq) + ")"
  491. else
  492. e.color = linkScale(d.tq).hex()
  493. return e
  494. })
  495. linksDict = {}
  496. nodesDict = {}
  497. intNodes.forEach(function (d) {
  498. d.neighbours = {}
  499. if (d.o.node)
  500. nodesDict[d.o.node.nodeinfo.node_id] = d
  501. var name = nodeName(d)
  502. var offset = 5
  503. var lineWidth = 3
  504. var buffer = document.createElement("canvas")
  505. var r = window.devicePixelRatio
  506. var bctx = buffer.getContext("2d")
  507. bctx.font = "11px Roboto"
  508. var width = bctx.measureText(name).width
  509. var scale = zoomBehavior.scaleExtent()[1] * r
  510. buffer.width = (width + 2 * lineWidth) * scale
  511. buffer.height = (16 + 2 * lineWidth) * scale
  512. bctx.scale(scale, scale)
  513. bctx.textBaseline = "middle"
  514. bctx.textAlign = "center"
  515. bctx.fillStyle = "rgba(242, 227, 198, 1.0)"
  516. bctx.shadowColor = "rgba(0, 0, 0, 1)"
  517. bctx.shadowBlur = 5
  518. bctx.fillText(name, buffer.width / (2 * scale), buffer.height / (2 * scale))
  519. d.label = buffer
  520. d.labelWidth = buffer.width / scale
  521. d.labelHeight = buffer.height / scale
  522. d.labelA = offset + buffer.width / (2 * scale)
  523. d.labelB = offset + buffer.height / (2 * scale)
  524. })
  525. intLinks.forEach(function (d) {
  526. d.source.neighbours[d.target.o.id] = {node: d.target, link: d}
  527. d.target.neighbours[d.source.o.id] = {node: d.source, link: d}
  528. if (d.o.source.node && d.o.target.node)
  529. linksDict[d.o.id] = d
  530. })
  531. intNodes.forEach(function (d) {
  532. d.neighbours = Object.keys(d.neighbours).map(function (k) {
  533. return d.neighbours[k]
  534. })
  535. })
  536. nodes = intNodes.filter(function (d) { return d.o.node })
  537. unknownNodes = intNodes.filter(function (d) { return !d.o.node })
  538. if (localStorageTest()) {
  539. var save = JSON.parse(localStorage.getItem("graph/nodeposition"))
  540. if (save) {
  541. var nodePositions = {}
  542. save.forEach( function (d) {
  543. nodePositions[d.id] = d
  544. })
  545. intNodes.forEach( function (d) {
  546. if (nodePositions[d.o.id] && (d.x === undefined || d.y === undefined)) {
  547. d.x = nodePositions[d.o.id].x
  548. d.y = nodePositions[d.o.id].y
  549. }
  550. })
  551. }
  552. }
  553. var diameter = graphDiameter(intNodes)
  554. force.nodes(intNodes)
  555. .links(intLinks)
  556. .size([diameter, diameter])
  557. updateHighlight(true)
  558. force.start()
  559. resizeCanvas()
  560. }
  561. self.resetView = function () {
  562. highlight = undefined
  563. updateHighlight()
  564. doAnimation = true
  565. }
  566. self.gotoNode = function (d) {
  567. highlight = {type: "node", o: d}
  568. updateHighlight()
  569. doAnimation = true
  570. }
  571. self.gotoLink = function (d) {
  572. highlight = {type: "link", o: d}
  573. updateHighlight()
  574. doAnimation = true
  575. }
  576. self.destroy = function () {
  577. force.stop()
  578. canvas.remove()
  579. force = null
  580. if (el.parentNode)
  581. el.parentNode.removeChild(el)
  582. }
  583. self.render = function (d) {
  584. d.appendChild(el)
  585. resizeCanvas()
  586. updateHighlight()
  587. }
  588. return self
  589. }
  590. })