forcegraph: backport client circles from ffmap-d3

CHANGELOG.md

@@ -15,6 +15,7 @@
 - map: locate user
 - map: adding custom layers from leaflet.providers
 - nodelist: sort by uptime fixed
+- graph: circles for clients
 
 ### Fixed bugs:
 

lib/forcegraph.js

@@ -266,6 +266,39 @@ define(["d3"], function (d3) {
                       xExtent[1] - xExtent[0] + 2 * margin,
                       yExtent[1] - yExtent[0] + 2 * margin)
 
+      ctx.beginPath()
+      nodes.filter(visibleNodes).forEach(function (d) {
+        var clients = d.o.node.statistics.clients
+        if (d.clients === 0)
+          return
+
+        var distance = 16
+        var radius = 3
+        var a = 1.2
+        var startAngle = Math.PI
+        var angle = startAngle
+
+        for (var i = 0; i < clients; i++) {
+          if ((angle - startAngle) > 2 * Math.PI) {
+            angle = startAngle
+            distance += 2 * radius * a
+          }
+
+          var x = d.x + distance * Math.cos(angle)
+          var y = d.y + distance * Math.sin(angle)
+
+          ctx.moveTo(x, y)
+          ctx.arc(x, y, radius, 0, 2 * Math.PI)
+
+          var n = Math.floor((Math.PI * distance) / (a * radius))
+          var angleDelta = 2 * Math.PI / n
+          angle += angleDelta
+        }
+      })
+
+      ctx.fillStyle = "#73A7CC"
+      ctx.fill()
+
       if (highlightedLinks.length) {
         ctx.save()
         ctx.lineWidth = 10