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 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();
};