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

64
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,30 +213,44 @@ define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'utils/math', 'forcegr
}; };
self.gotoNode = function gotoNode(d) { self.gotoNode = function gotoNode(d) {
for (var i = 0; i < intNodes.length; i++) { function getNode() {
var n = intNodes[i]; for (var i = 0; i < intNodes.length; i++) {
if (n.o.node.nodeinfo.node_id !== d.nodeinfo.node_id) { var n = intNodes[i];
continue; 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 }); redraw();
transform.k = (ZOOM_MAX + 1) / 2; }
moveTo(n.x, n.y); if (!animate) {
break; sleep(1500).then(getNode);
} else {
getNode();
} }
redraw();
}; };
self.gotoLink = function gotoLink(d) { self.gotoLink = function gotoLink(d) {
draw.setHighlight({ type: 'link', o: d }); function getLink() {
for (var i = 0; i < intLinks.length; i++) { draw.setHighlight({ type: 'link', o: d });
var l = intLinks[i]; for (var i = 0; i < intLinks.length; i++) {
if (l.o !== d) { var l = intLinks[i];
continue; 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); redraw();
break; }
if (!animate) {
sleep(1500).then(getLink);
} else {
getLink();
} }
redraw();
}; };