diff --git a/lib/forcegraph.js b/lib/forcegraph.js index 95b6332..1d71ce8 100644 --- a/lib/forcegraph.js +++ b/lib/forcegraph.js @@ -230,10 +230,13 @@ define(["d3"], function (d3) { var cos = Math.cos(angle) var sin = Math.sin(angle) - var x = d.x + d.labelA * Math.pow(Math.abs(cos), 2 / 5) * Math.sign(cos) - var y = d.y + d.labelB * Math.pow(Math.abs(sin), 2 / 5) * Math.sign(sin) + var width = d.labelWidth + var height = d.labelHeight - ctx.fillText(d.label, x, y) + var x = d.x + d.labelA * Math.pow(Math.abs(cos), 2 / 5) * Math.sign(cos) - width / 2 + var y = d.y + d.labelB * Math.pow(Math.abs(sin), 2 / 5) * Math.sign(sin) - height / 2 + + ctx.drawImage(d.label, x, y, width, height) } function visibleLinks(d) { @@ -256,8 +259,6 @@ define(["d3"], function (d3) { var xExtent = d3.extent(intNodes, function (d) { return d.px }) var yExtent = d3.extent(intNodes, function (d) { return d.py }) - ctx.font = "11px Roboto" - if (translateP) { ctx.save() ctx.translate(translateP[0], translateP[1]) @@ -302,11 +303,8 @@ define(["d3"], function (d3) { ctx.stroke() }) - ctx.textAlign = "center" - ctx.textBaseline = "middle" - ctx.fillStyle = "rgba(0, 0, 0, 0.6)" - - intNodes.filter(visibleNodes).forEach(drawLabel) + if (scale > 0.9) + intNodes.filter(visibleNodes).forEach(drawLabel, scale) ctx.beginPath() @@ -464,14 +462,30 @@ define(["d3"], function (d3) { if (d.o.node) nodesDict[d.o.node.nodeinfo.node_id] = d - d.label = nodeName(d) + var name = nodeName(d) ctx.font = "11px Roboto" var offset = 10 - var width = ctx.measureText(d.label).width + var width = ctx.measureText(name).width + var buffer = document.createElement("canvas") + 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)" + bctx.scale(scale, scale) + bctx.strokeText(name, bctx.lineWidth, bctx.lineWidth) + bctx.fillText(name, bctx.lineWidth * scale, bctx.lineWidth * scale) - d.labelA = offset + width / 2 - d.labelB = offset + 11 / 2 + d.label = buffer + d.labelWidth = buffer.width / scale + d.labelHeight = buffer.height / scale + d.labelA = offset + buffer.width / (2 * scale) + d.labelB = offset + buffer.height / (2 * scale) }) intLinks.forEach(function (d) {