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

forcegraph: draw clients above everything else

Browse Source
This commit is contained in:
Nils Schneider 2015-07-31 11:42:25 +02:00
parent 7fdb6c7e21
commit ca8ce8392f
1 changed files with 61 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
lib/forcegraph.js
View File

@ -284,6 +284,64 @@ define(["d3"], function (d3) {
translateP = translate
scaleP = scale
var clientColor = "rgba(230, 50, 75, 1.0)"
var unknownColor = "#D10E2A"
var nodeColor = "#F2E3C6"
var highlightColor = "rgba(252, 227, 198, 0.15)"
var nodeRadius = 6
// -- draw links --
ctx.save()
links.forEach(function (d) {
var dx = d.target.x - d.source.x
var dy = d.target.y - d.source.y
var a = Math.sqrt(dx * dx + dy * dy)
dx /= a
dy /= a
ctx.beginPath()
ctx.moveTo(d.source.x + dx * nodeRadius, d.source.y + dy * nodeRadius)
ctx.lineTo(d.target.x - dx * nodeRadius, d.target.y - dy * nodeRadius)
ctx.strokeStyle = d.color
ctx.globalAlpha = d.o.vpn ? 0.1 : 0.8
ctx.lineWidth = d.o.vpn ? 1.5 : 2.5
ctx.stroke()
})
ctx.restore()
// -- draw labels --
if (scale > 0.9)
intNodes.filter(visibleNodes).forEach(drawLabel, scale)
// -- draw unknown nodes --
ctx.beginPath()
unknownNodes.filter(visibleNodes).forEach(function (d) {
ctx.moveTo(d.x + nodeRadius, d.y)
ctx.arc(d.x, d.y, nodeRadius, 0, 2 * Math.PI)
})
ctx.strokeStyle = unknownColor
ctx.lineWidth = nodeRadius
ctx.stroke()
// -- draw nodes --
ctx.beginPath()
nodes.filter(visibleNodes).forEach(function (d) {
ctx.moveTo(d.x + nodeRadius, d.y)
ctx.arc(d.x, d.y, nodeRadius, 0, 2 * Math.PI)
})
ctx.strokeStyle = nodeColor
ctx.lineWidth = nodeRadius
ctx.stroke()
// -- draw clients --
ctx.save()
ctx.beginPath()
nodes.filter(visibleNodes).forEach(function (d) {
var clients = d.o.node.statistics.clients
@ -311,61 +369,12 @@ define(["d3"], function (d3) {
}
})
var clientColor = "#E6324B"
var unknownColor = "#D10E2A"
var nodeColor = "#F2E3C6"
var highlightColor = "rgba(252, 227, 198, 0.15)"
var nodeRadius = 6
ctx.fillStyle = clientColor
ctx.globalCompositeOperation = "overlay"
ctx.fill()
ctx.save()
links.forEach(function (d) {
var dx = d.target.x - d.source.x
var dy = d.target.y - d.source.y
var a = Math.sqrt(dx * dx + dy * dy)
dx /= a
dy /= a
ctx.beginPath()
ctx.moveTo(d.source.x + dx * nodeRadius, d.source.y + dy * nodeRadius)
ctx.lineTo(d.target.x - dx * nodeRadius, d.target.y - dy * nodeRadius)
ctx.strokeStyle = d.color
ctx.globalAlpha = d.o.vpn ? 0.1 : 0.8
ctx.lineWidth = d.o.vpn ? 1.5 : 2.5
ctx.stroke()
})
ctx.restore()
if (scale > 0.9)
intNodes.filter(visibleNodes).forEach(drawLabel, scale)
ctx.beginPath()
unknownNodes.filter(visibleNodes).forEach(function (d) {
ctx.moveTo(d.x + nodeRadius, d.y)
ctx.arc(d.x, d.y, nodeRadius, 0, 2 * Math.PI)
})
ctx.strokeStyle = unknownColor
ctx.lineWidth = nodeRadius
ctx.stroke()
ctx.beginPath()
nodes.filter(visibleNodes).forEach(function (d) {
ctx.moveTo(d.x + nodeRadius, d.y)
ctx.arc(d.x, d.y, nodeRadius, 0, 2 * Math.PI)
})
ctx.strokeStyle = nodeColor
ctx.lineWidth = nodeRadius
ctx.stroke()
// -- draw node highlights --
if (highlightedNodes.length) {
ctx.save()
ctx.shadowColor = "rgba(255, 255, 255, 1.0)"
@ -386,6 +395,7 @@ define(["d3"], function (d3) {
ctx.restore()
}
// -- draw link highlights --
if (highlightedLinks.length) {
ctx.save()
ctx.lineWidth = 2 * 5 * nodeRadius