freifunk/hopglass
8
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

forcegraph: more visible highlight

Browse source
This commit is contained in:
Nils Schneider 2015-07-30 23:47:58 +02:00
parent 8e1e698849
commit 7fdb6c7e21
1 changed files with 50 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
lib/forcegraph.js
View file

@ -193,7 +193,6 @@ define(["d3"], function (d3) {
if (l) {
highlightedLinks = [l]
highlightedNodes = [l.source, l.target]
if (!nopanzoom) {
var x = d3.extent([l.source, l.target], function (d) { return d.x })
@ -313,36 +312,28 @@ define(["d3"], function (d3) {
})
var clientColor = "#E6324B"
var hilightColor = "#FA940F"
var unknownColor = "#D10E2A"
var nodeColor = "#F2E3C6"
var highlightColor = "rgba(252, 227, 198, 0.15)"
var nodeRadius = 6
ctx.fillStyle = clientColor
ctx.fill()
if (highlightedLinks.length) {
ctx.save()
ctx.lineWidth = 10
ctx.strokeStyle = hilightColor
highlightedLinks.forEach(function (d) {
ctx.beginPath()
ctx.moveTo(d.source.x, d.source.y)
ctx.lineTo(d.target.x, d.target.y)
ctx.stroke()
})
ctx.restore()
}
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, d.source.y)
ctx.lineTo(d.target.x, d.target.y)
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 : 1
ctx.globalAlpha = d.o.vpn ? 0.1 : 0.8
ctx.lineWidth = d.o.vpn ? 1.5 : 2.5
ctx.stroke()
})
@ -355,35 +346,61 @@ define(["d3"], function (d3) {
ctx.beginPath()
unknownNodes.filter(visibleNodes).forEach(function (d) {
ctx.moveTo(d.x + 8, d.y)
ctx.arc(d.x, d.y, 8, 0, 2 * Math.PI)
ctx.moveTo(d.x + nodeRadius, d.y)
ctx.arc(d.x, d.y, nodeRadius, 0, 2 * Math.PI)
})
ctx.fillStyle = unknownColor
ctx.strokeStyle = unknownColor
ctx.lineWidth = nodeRadius
ctx.fill()
ctx.stroke()
ctx.beginPath()
nodes.filter(visibleNodes).forEach(function (d) {
ctx.moveTo(d.x + 8, d.y)
ctx.arc(d.x, d.y, 8, 0, 2 * Math.PI)
ctx.moveTo(d.x + nodeRadius, d.y)
ctx.arc(d.x, d.y, nodeRadius, 0, 2 * Math.PI)
})
ctx.fillStyle = nodeColor
ctx.strokeStyle = nodeColor
ctx.lineWidth = nodeRadius
ctx.fill()
ctx.stroke()
if (highlightedNodes.length) {
ctx.save()
ctx.strokeStyle = hilightColor
ctx.fillStyle = nodeColor
ctx.lineWidth = 6
ctx.shadowColor = "rgba(255, 255, 255, 1.0)"
ctx.shadowBlur = 10 * nodeRadius
ctx.shadowOffsetX = 0
ctx.shadowOffsetY = 0
ctx.globalCompositeOperation = "lighten"
ctx.fillStyle = highlightColor
highlightedNodes.forEach(function (d) {
ctx.beginPath()
ctx.moveTo(d.x + 8, d.y)
ctx.arc(d.x, d.y, 8, 0, 2 * Math.PI)
ctx.moveTo(d.x + 5 * nodeRadius, d.y)
ctx.arc(d.x, d.y, 5 * nodeRadius, 0, 2 * Math.PI)
ctx.fill()
ctx.restore()
})
ctx.restore()
}
if (highlightedLinks.length) {
ctx.save()
ctx.lineWidth = 2 * 5 * nodeRadius
ctx.shadowColor = "rgba(255, 255, 255, 1.0)"
ctx.shadowBlur = 10 * nodeRadius
ctx.shadowOffsetX = 0
ctx.shadowOffsetY = 0
ctx.globalCompositeOperation = "lighten"
ctx.strokeStyle = highlightColor
ctx.lineCap = "round"
highlightedLinks.forEach(function (d) {
ctx.beginPath()
ctx.moveTo(d.source.x, d.source.y)
ctx.lineTo(d.target.x, d.target.y)
ctx.stroke()
})