forcegraph: dropshadows behind nodes

lib/forcegraph.js

@@ -305,16 +305,51 @@ define(["d3"], function (d3) {
 
 
       // -- draw nodes --
-      ctx.beginPath()
+
+      var node = document.createElement("canvas")
+      node.width = scale * nodeRadius * 8
+      node.height = node.width
+
+      var nctx = node.getContext("2d")
+      nctx.scale(scale, scale)
+      nctx.save()
+
+      nctx.translate(-node.width / scale, -node.height / scale)
+      nctx.lineWidth = nodeRadius
+
+      nctx.beginPath()
+      nctx.moveTo(nodeRadius, 0)
+      nctx.arc(0, 0, nodeRadius, 0, 2 * Math.PI)
+
+      nctx.strokeStyle = "rgba(255, 0, 0, 1)"
+      nctx.shadowOffsetX = node.width * 1.5 + 0
+      nctx.shadowOffsetY = node.height * 1.5 + 3
+      nctx.shadowBlur = 6
+      nctx.shadowColor = "rgba(0, 0, 0, 0.32)"
+      nctx.stroke()
+      nctx.shadowOffsetX = node.width * 1.5 + 0
+      nctx.shadowOffsetY = node.height * 1.5 + 3
+      nctx.shadowBlur = 6
+      nctx.shadowColor = "rgba(0, 0, 0, 0.46)"
+      nctx.stroke()
+
+      nctx.restore()
+      nctx.translate(node.width / 2 / scale, node.height / 2 / scale)
+
+      nctx.beginPath()
+      nctx.moveTo(nodeRadius, 0)
+      nctx.arc(0, 0, nodeRadius, 0, 2 * Math.PI)
+
+      nctx.strokeStyle = nodeColor
+      nctx.lineWidth = nodeRadius
+      nctx.stroke()
+
+      ctx.save()
+      ctx.scale(1 / scale, 1 / scale)
       nodes.filter(visibleNodes).forEach(function (d) {
-        ctx.moveTo(d.x + nodeRadius, d.y)
-        ctx.arc(d.x, d.y, nodeRadius, 0, 2 * Math.PI)
+        ctx.drawImage(node, scale * d.x - node.width / 2, scale * d.y - node.height / 2)
       })
-
-      ctx.strokeStyle = nodeColor
-      ctx.lineWidth = nodeRadius
-
-      ctx.stroke()
+      ctx.restore()
 
       // -- draw clients --
       ctx.save()