Freifunk-Troisdorf/meshviewer
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[TASK] improve forcegraph (link and more velocity)

Browse Source
This commit is contained in:
Martin Geno 2017-04-14 20:43:03 +02:00
parent bd7a93de73
commit ed1bffd055
No known key found for this signature in database
GPG Key ID: F0D39A37E925E941
1 changed files with 46 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
lib/forcegraph.js
View File

@ -9,6 +9,7 @@ define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'utils/math', 'forcegr
var ctx; var ctx;
var force; var force;
var forceLink; var forceLink;
var animate = false;
var transform = d3Zoom.zoomIdentity; var transform = d3Zoom.zoomIdentity;
var intNodes = []; var intNodes = [];
@ -26,6 +27,12 @@ define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'utils/math', 'forcegr
draw.setTransform(transform); draw.setTransform(transform);
function sleep(time) {
return new Promise(function (resolve) {
setTimeout(resolve, time);
});
}
function resizeCanvas() { function resizeCanvas() {
canvas.width = el.offsetWidth; canvas.width = el.offsetWidth;
canvas.height = el.offsetHeight; 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('x', d3Force.forceX().strength(0.02))
.force('y', d3Force.forceY().strength(0.02)) .force('y', d3Force.forceY().strength(0.02))
.force('collide', d3Force.forceCollide()) .force('collide', d3Force.forceCollide())
.on('tick', redraw); .on('tick', redraw)
.alphaDecay(0.01)
.velocityDecay(0.1);
var drag = d3Drag.drag() var drag = d3Drag.drag()
.subject(function () { .subject(function () {
@ -188,7 +197,12 @@ define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'utils/math', 'forcegr
forceLink.links(intLinks); forceLink.links(intLinks);
force.alpha(1).restart(); force.alpha(1).restart();
force.alphaTarget(1);
resizeCanvas(); resizeCanvas();
sleep(1000).then(function () {
force.alphaTarget(0);
animate = true;
});
}; };
self.resetView = function resetView() { self.resetView = function resetView() {
@ -199,6 +213,7 @@ define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'utils/math', 'forcegr
}; };
self.gotoNode = function gotoNode(d) { self.gotoNode = function gotoNode(d) {
function getNode() {
for (var i = 0; i < intNodes.length; i++) { for (var i = 0; i < intNodes.length; i++) {
var n = intNodes[i]; var n = intNodes[i];
if (n.o.node.nodeinfo.node_id !== d.nodeinfo.node_id) { if (n.o.node.nodeinfo.node_id !== d.nodeinfo.node_id) {
@ -210,9 +225,16 @@ define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'utils/math', 'forcegr
break; break;
} }
redraw(); redraw();
}
if (!animate) {
sleep(1500).then(getNode);
} else {
getNode();
}
}; };
self.gotoLink = function gotoLink(d) { self.gotoLink = function gotoLink(d) {
function getLink() {
draw.setHighlight({ type: 'link', o: d }); draw.setHighlight({ type: 'link', o: d });
for (var i = 0; i < intLinks.length; i++) { for (var i = 0; i < intLinks.length; i++) {
var l = intLinks[i]; var l = intLinks[i];
@ -223,6 +245,12 @@ define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'utils/math', 'forcegr
break; break;
} }
redraw(); redraw();
}
if (!animate) {
sleep(1500).then(getLink);
} else {
getLink();
}
}; };