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

forcegraph: show vpn links

Browse Source
This commit is contained in:
Nils Schneider 2015-04-19 02:16:06 +02:00
parent e09ec32d93
commit 8a09342ab7
1 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
lib/forcegraph.js
View File

@ -200,16 +200,20 @@ define(["d3"], function (d3) {
} }
function drawLabel(d) { function drawLabel(d) {
var sum = d.neighbours.reduce(function (a, b) { var neighbours = d.neighbours.filter(function (d) {
return [a[0] + b.x, a[1] + b.y] return !d.link.o.vpn
})
var sum = neighbours.reduce(function (a, b) {
return [a[0] + b.node.x, a[1] + b.node.y]
}, [0, 0]) }, [0, 0])
var sumCos = sum[0] - d.x * d.neighbours.length var sumCos = sum[0] - d.x * neighbours.length
var sumSin = sum[1] - d.y * d.neighbours.length var sumSin = sum[1] - d.y * neighbours.length
var angle = Math.PI / 2 var angle = Math.PI / 2
if (d.neighbours.length > 0) if (neighbours.length > 0)
angle = Math.PI + Math.atan2(sumSin, sumCos) angle = Math.PI + Math.atan2(sumSin, sumCos)
var cos = Math.cos(angle) var cos = Math.cos(angle)
@ -315,16 +319,20 @@ define(["d3"], function (d3) {
ctx.restore() ctx.restore()
} }
ctx.lineWidth = 2.5 ctx.save()
links.forEach(function (d) { links.forEach(function (d) {
ctx.beginPath() ctx.beginPath()
ctx.moveTo(d.source.x, d.source.y) ctx.moveTo(d.source.x, d.source.y)
ctx.lineTo(d.target.x, d.target.y) ctx.lineTo(d.target.x, d.target.y)
ctx.strokeStyle = d.color ctx.strokeStyle = d.color
ctx.globalAlpha = d.o.vpn ? 0.1 : 1
ctx.lineWidth = d.o.vpn ? 1.5 : 2.5
ctx.stroke() ctx.stroke()
}) })
ctx.restore()
if (scale > 0.9) if (scale > 0.9)
intNodes.filter(visibleNodes).forEach(drawLabel, scale) intNodes.filter(visibleNodes).forEach(drawLabel, scale)
@ -337,6 +345,7 @@ define(["d3"], function (d3) {
ctx.strokeStyle = "#d00000" ctx.strokeStyle = "#d00000"
ctx.fillStyle = "#ffffff" ctx.fillStyle = "#ffffff"
ctx.lineWidth = 2.5
ctx.fill() ctx.fill()
ctx.stroke() ctx.stroke()
@ -470,11 +479,18 @@ define(["d3"], function (d3) {
ctx = canvas.getContext("2d") ctx = canvas.getContext("2d")
force = d3.layout.force() force = d3.layout.force()
.charge(-80) .charge(-250)
.gravity(0.01) .gravity(0.1)
.chargeDistance(8 * LINK_DISTANCE) .linkDistance(function (d) {
.linkDistance(LINK_DISTANCE) if (d.o.vpn)
return 0
else
return LINK_DISTANCE
})
.linkStrength(function (d) { .linkStrength(function (d) {
if (d.o.vpn)
return 0
else
return Math.max(0.5, 1 / d.o.tq) return Math.max(0.5, 1 / d.o.tq)
}) })
.on("tick", tickEvent) .on("tick", tickEvent)
@ -515,9 +531,7 @@ define(["d3"], function (d3) {
oldLinks[d.o.id] = d oldLinks[d.o.id] = d
}) })
intLinks = data.graph.links.filter( function (d) { intLinks = data.graph.links.map( function (d) {
return !d.vpn
}).map( function (d) {
var e var e
if (d.id in oldLinks) if (d.id in oldLinks)
e = oldLinks[d.id] e = oldLinks[d.id]
@ -572,8 +586,8 @@ define(["d3"], function (d3) {
}) })
intLinks.forEach(function (d) { intLinks.forEach(function (d) {
d.source.neighbours[d.target.o.id] = d.target d.source.neighbours[d.target.o.id] = {node: d.target, link: d}
d.target.neighbours[d.source.o.id] = d.source d.target.neighbours[d.source.o.id] = {node: d.source, link: d}
if (d.o.source.node && d.o.target.node) if (d.o.source.node && d.o.target.node)
linksDict[d.o.id] = d linksDict[d.o.id] = d