forcegraph: show vpn links
This commit is contained in:
parent
e09ec32d93
commit
8a09342ab7
|
@ -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,12 +479,19 @@ 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) {
|
||||||
return Math.max(0.5, 1 / d.o.tq)
|
if (d.o.vpn)
|
||||||
|
return 0
|
||||||
|
else
|
||||||
|
return Math.max(0.5, 1 / d.o.tq)
|
||||||
})
|
})
|
||||||
.on("tick", tickEvent)
|
.on("tick", tickEvent)
|
||||||
.on("end", savePositions)
|
.on("end", savePositions)
|
||||||
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue