diff --git a/lib/forcegraph.js b/lib/forcegraph.js index 4b28245..7c6d2d1 100644 --- a/lib/forcegraph.js +++ b/lib/forcegraph.js @@ -9,6 +9,7 @@ define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'utils/math', 'forcegr var ctx; var force; var forceLink; + var animate = false; var transform = d3Zoom.zoomIdentity; var intNodes = []; @@ -26,6 +27,12 @@ define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'utils/math', 'forcegr draw.setTransform(transform); + function sleep(time) { + return new Promise(function (resolve) { + setTimeout(resolve, time); + }); + } + function resizeCanvas() { canvas.width = el.offsetWidth; canvas.height = el.offsetHeight; @@ -111,7 +118,9 @@ define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'utils/math', 'forcegr .force('x', d3Force.forceX().strength(0.02)) .force('y', d3Force.forceY().strength(0.02)) .force('collide', d3Force.forceCollide()) - .on('tick', redraw); + .on('tick', redraw) + .alphaDecay(0.01) + .velocityDecay(0.1); var drag = d3Drag.drag() .subject(function () { @@ -188,7 +197,12 @@ define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'utils/math', 'forcegr forceLink.links(intLinks); force.alpha(1).restart(); + force.alphaTarget(1); resizeCanvas(); + sleep(1000).then(function () { + force.alphaTarget(0); + animate = true; + }); }; self.resetView = function resetView() { @@ -199,30 +213,44 @@ define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'utils/math', 'forcegr }; self.gotoNode = function gotoNode(d) { - for (var i = 0; i < intNodes.length; i++) { - var n = intNodes[i]; - if (n.o.node.nodeinfo.node_id !== d.nodeinfo.node_id) { - continue; + function getNode() { + for (var i = 0; i < intNodes.length; i++) { + var n = intNodes[i]; + if (n.o.node.nodeinfo.node_id !== d.nodeinfo.node_id) { + continue; + } + draw.setHighlight({ type: 'node', o: n.o.node }); + transform.k = (ZOOM_MAX + 1) / 2; + moveTo(n.x, n.y); + break; } - draw.setHighlight({ type: 'node', o: n.o.node }); - transform.k = (ZOOM_MAX + 1) / 2; - moveTo(n.x, n.y); - break; + redraw(); + } + if (!animate) { + sleep(1500).then(getNode); + } else { + getNode(); } - redraw(); }; self.gotoLink = function gotoLink(d) { - draw.setHighlight({ type: 'link', o: d }); - for (var i = 0; i < intLinks.length; i++) { - var l = intLinks[i]; - if (l.o !== d) { - continue; + function getLink() { + draw.setHighlight({ type: 'link', o: d }); + for (var i = 0; i < intLinks.length; i++) { + var l = intLinks[i]; + if (l.o !== d) { + continue; + } + moveTo((l.source.x + l.target.x) / 2, (l.source.y + l.target.y) / 2); + break; } - moveTo((l.source.x + l.target.x) / 2, (l.source.y + l.target.y) / 2); - break; + redraw(); + } + if (!animate) { + sleep(1500).then(getLink); + } else { + getLink(); } - redraw(); };