Freifunk-Troisdorf/meshviewer
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

forcegraph: pre-render label

Browse Source
This commit is contained in:
Nils Schneider 2015-04-11 00:30:36 +02:00
parent 942464f86b
commit a6ad9f928a
1 changed files with 28 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
lib/forcegraph.js
View File

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