forcegraph: draw clients above everything else

lib/forcegraph.js

@@ -284,44 +284,14 @@ define(["d3"], function (d3) {
       translateP = translate
       scaleP = scale
 
-      ctx.beginPath()
-      nodes.filter(visibleNodes).forEach(function (d) {
-        var clients = d.o.node.statistics.clients
-        if (clients === 0)
-          return
-
-        var startDistance = 16
-        var radius = 3
-        var a = 1.2
-        var startAngle = Math.PI
-
-        for (var orbit = 0, i = 0; i < clients; orbit++) {
-          var distance = startDistance + orbit * 2 * radius * a
-          var n = Math.floor((Math.PI * distance) / (a * radius))
-          var delta = clients - i
-
-          for (var j = 0; j < Math.min(delta, n); i++, j++) {
-            var angle = 2 * Math.PI / n * j
-            var x = d.x + distance * Math.cos(angle + startAngle)
-            var y = d.y + distance * Math.sin(angle + startAngle)
-
-            ctx.moveTo(x, y)
-            ctx.arc(x, y, radius, 0, 2 * Math.PI)
-          }
-        }
-      })
-
-      var clientColor = "#E6324B"
+      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
 
-      ctx.fillStyle = clientColor
-      ctx.fill()
-
+      // -- draw links --
       ctx.save()
-
       links.forEach(function (d) {
         var dx = d.target.x - d.source.x
         var dy = d.target.y - d.source.y
@@ -340,11 +310,13 @@ define(["d3"], function (d3) {
 
       ctx.restore()
 
+      // -- draw labels --
       if (scale > 0.9)
         intNodes.filter(visibleNodes).forEach(drawLabel, scale)
 
-      ctx.beginPath()
 
+      // -- 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)
@@ -355,6 +327,8 @@ define(["d3"], function (d3) {
 
       ctx.stroke()
 
+
+      // -- draw nodes --
       ctx.beginPath()
       nodes.filter(visibleNodes).forEach(function (d) {
         ctx.moveTo(d.x + nodeRadius, d.y)
@@ -366,6 +340,41 @@ define(["d3"], function (d3) {
 
       ctx.stroke()
 
+      // -- draw clients --
+      ctx.save()
+      ctx.beginPath()
+      nodes.filter(visibleNodes).forEach(function (d) {
+        var clients = d.o.node.statistics.clients
+        if (clients === 0)
+          return
+
+        var startDistance = 16
+        var radius = 3
+        var a = 1.2
+        var startAngle = Math.PI
+
+        for (var orbit = 0, i = 0; i < clients; orbit++) {
+          var distance = startDistance + orbit * 2 * radius * a
+          var n = Math.floor((Math.PI * distance) / (a * radius))
+          var delta = clients - i
+
+          for (var j = 0; j < Math.min(delta, n); i++, j++) {
+            var angle = 2 * Math.PI / n * j
+            var x = d.x + distance * Math.cos(angle + startAngle)
+            var y = d.y + distance * Math.sin(angle + startAngle)
+
+            ctx.moveTo(x, y)
+            ctx.arc(x, y, radius, 0, 2 * Math.PI)
+          }
+        }
+      })
+
+      ctx.fillStyle = clientColor
+      ctx.globalCompositeOperation = "overlay"
+      ctx.fill()
+      ctx.restore()
+
+      // -- 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