From 7fdb6c7e218f297d1402dce218c96f4454cfe38c Mon Sep 17 00:00:00 2001 From: Nils Schneider Date: Thu, 30 Jul 2015 23:47:58 +0200 Subject: [PATCH] forcegraph: more visible highlight --- lib/forcegraph.js | 83 ++++++++++++++++++++++++++++------------------- 1 file changed, 50 insertions(+), 33 deletions(-) diff --git a/lib/forcegraph.js b/lib/forcegraph.js index cf794f0..8457a5e 100644 --- a/lib/forcegraph.js +++ b/lib/forcegraph.js @@ -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() })