forcegraph: draw labels ontop of everything else

lib/forcegraph.js

@@ -291,11 +291,6 @@ define(["d3"], function (d3) {
 
       ctx.restore()
 
-      // -- draw labels --
-      if (scale > 0.9)
-        intNodes.filter(visibleNodes).forEach(drawLabel, scale)
-
-
       // -- draw unknown nodes --
       ctx.beginPath()
       unknownNodes.filter(visibleNodes).forEach(function (d) {
@@ -398,6 +393,10 @@ define(["d3"], function (d3) {
         ctx.restore()
       }
 
+      // -- draw labels --
+      if (scale > 0.9)
+        intNodes.filter(visibleNodes).forEach(drawLabel, scale)
+
       ctx.restore()
     }
 
@@ -609,7 +608,7 @@ define(["d3"], function (d3) {
 
         var name = nodeName(d)
 
-        var offset = 8
+        var offset = 5
         var lineWidth = 3
         var buffer = document.createElement("canvas")
         var r = window.devicePixelRatio
@@ -622,12 +621,9 @@ define(["d3"], function (d3) {
         bctx.scale(scale, scale)
         bctx.textBaseline = "middle"
         bctx.textAlign = "center"
-        bctx.lineWidth = lineWidth
-        bctx.lineCap = "round"
-        bctx.strokeStyle = "rgba(53, 54, 52, 0.1)"
-        bctx.fillStyle = "rgba(242, 227, 198, 0.8)"
-        bctx.miterLimit = 2
-        bctx.strokeText(name, buffer.width / (2 * scale), buffer.height / (2 * scale))
+        bctx.fillStyle = "rgba(242, 227, 198, 1.0)"
+        bctx.shadowColor = "rgba(0, 0, 0, 1)"
+        bctx.shadowBlur = 5
         bctx.fillText(name, buffer.width / (2 * scale), buffer.height / (2 * scale))
 
         d.label = buffer