diff --git a/CHANGELOG.md b/CHANGELOG.md index 7ff4e7d..54d3a03 100644 --- a/CHANGELOG.md +++ b/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: diff --git a/lib/forcegraph.js b/lib/forcegraph.js index aa11d59..6189ff9 100644 --- a/lib/forcegraph.js +++ b/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