diff --git a/lib/forcegraph.js b/lib/forcegraph.js index 0ff0931..6208da7 100644 --- a/lib/forcegraph.js +++ b/lib/forcegraph.js @@ -470,21 +470,25 @@ define(["d3"], function (d3) { var name = nodeName(d) ctx.font = "11px Roboto" - var offset = 10 + var offset = 8 + var lineWidth = 3 var width = ctx.measureText(name).width var buffer = document.createElement("canvas") + var r = window.devicePixelRatio var bctx = buffer.getContext("2d") - var scale = zoomBehavior.scaleExtent()[1] - bctx.lineWidth = 2.5 - buffer.width = (width + 2 * bctx.lineWidth) * scale - buffer.height = (14 + 2 * bctx.lineWidth) * scale - bctx.textBaseline = "top" - bctx.font = ctx.font - bctx.strokeStyle = "rgba(255, 255, 255, 0.6)" - bctx.fillStyle = "rgba(0, 0, 0, 0.6)" + var scale = zoomBehavior.scaleExtent()[1] * r + buffer.width = (width + 2 * lineWidth) * scale + buffer.height = (16 + 2 * lineWidth) * scale bctx.scale(scale, scale) - bctx.strokeText(name, bctx.lineWidth, bctx.lineWidth) - bctx.fillText(name, bctx.lineWidth * scale, bctx.lineWidth * scale) + bctx.textBaseline = "middle" + bctx.textAlign = "center" + bctx.font = ctx.font + bctx.lineWidth = lineWidth + bctx.lineCap = "round" + bctx.strokeStyle = "rgba(255, 255, 255, 0.8)" + bctx.fillStyle = "rgba(0, 0, 0, 0.6)" + bctx.strokeText(name, buffer.width / (2 * scale), buffer.height / (2 * scale)) + bctx.fillText(name, buffer.width / (2 * scale), buffer.height / (2 * scale)) d.label = buffer d.labelWidth = buffer.width / scale