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