forcegraph: pre-render label
This commit is contained in:
parent
942464f86b
commit
a6ad9f928a
|
@ -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) {
|
||||
|
|
Loading…
Reference in a new issue