diff --git a/lib/forcegraph.js b/lib/forcegraph.js index 7212981..c6d554c 100644 --- a/lib/forcegraph.js +++ b/lib/forcegraph.js @@ -396,31 +396,9 @@ define(['d3', 'helper'], function (d3, helper) { ctx.save(); ctx.beginPath(); if (scale > 0.9) { + var startDistance = 16; 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 di = startDistance + orbit * 2 * radius * a; - var n = Math.floor((Math.PI * di) / (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 + di * Math.cos(angle + startAngle); - var y = d.y + di * Math.sin(angle + startAngle); - - ctx.moveTo(x, y); - ctx.arc(x, y, radius, 0, 2 * Math.PI); - } - } + helper.positionClients(ctx, d, Math.PI, d.o.node.statistics.clients, startDistance); }); } ctx.fillStyle = clientColor; diff --git a/lib/map/clientlayer.js b/lib/map/clientlayer.js index a85f2e4..2cdb718 100644 --- a/lib/map/clientlayer.js +++ b/lib/map/clientlayer.js @@ -32,36 +32,17 @@ define(['leaflet', 'helper'], var ctx = canvas.getContext('2d'); - var radius = 3; - var a = 1.2; + var startDistance = 12; ctx.beginPath(); nodes.forEach(function (d) { var p = map.project([d.node.nodeinfo.location.latitude, d.node.nodeinfo.location.longitude]); - var clients = d.node.statistics.clients; - - if (clients === 0) { - return; - } p.x -= s.x; p.y -= s.y; - 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 = p.x + distance * Math.cos(angle + d.startAngle); - var y = p.y + distance * Math.sin(angle + d.startAngle); - - ctx.moveTo(x, y); - ctx.arc(x, y, radius, 0, 2 * Math.PI); - } - } + helper.positionClients(ctx, p, d.startAngle, d.node.statistics.clients, startDistance); }); ctx.fillStyle = 'rgba(220, 0, 103, 0.7)'; diff --git a/lib/utils/helper.js b/lib/utils/helper.js index 46f1d97..2cd8cc8 100644 --- a/lib/utils/helper.js +++ b/lib/utils/helper.js @@ -195,5 +195,28 @@ define({ var br = map.unproject([s.x + margin + tileSize, s.y + margin + tileSize]); return { minX: br.lat, minY: tl.lng, maxX: tl.lat, maxY: br.lng }; + }, + positionClients: function positionClients(ctx, p, startAngle, clients, startDistance) { + if (clients === 0) { + return; + } + + var radius = 3; + var a = 1.2; + + 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 = p.x + distance * Math.cos(angle + startAngle); + var y = p.y + distance * Math.sin(angle + startAngle); + + ctx.moveTo(x, y); + ctx.arc(x, y, radius, 0, 2 * Math.PI); + } + } } });