Ciao a tutti,
volevo utilizzare arbor.js un forced graph: In pratica questo (Qui c'è il codice dello script che lo genera)
Volevo però sapere come posso fare per aggiungere una label ai vari nodi..
Nelle reference di arbor.js c'è un'altra demo dove le label sono aggiunte in questo modo:
codice:
// draw the nodes & save their bounds for edge drawing
var nodeBoxes = {}
particleSystem.eachNode(function(node, pt){
// node: {mass:#, p:{x,y}, name:"", data:{}}
// pt: {x:#, y:#} node position in screen coords
// determine the box size and round off the coords if we'll be
// drawing a text label (awful alignment jitter otherwise...)
var label = node.data.label||""
var w = ctx.measureText(""+label).width + 10
if (!(""+label).match(/^[ \t]*$/)){
pt.x = Math.floor(pt.x)
pt.y = Math.floor(pt.y)
}else{
label = null
}
// draw a rectangle centered at pt
if (node.data.color) ctx.fillStyle = node.data.color
else ctx.fillStyle = "rgba(0,0,0,.2)"
if (node.data.color=='none') ctx.fillStyle = "white"
if (node.data.shape=='dot'){
gfx.oval(pt.x-w/2, pt.y-w/2, w,w, {fill:ctx.fillStyle})
nodeBoxes[node.name] = [pt.x-w/2, pt.y-w/2, w,w]
}else{
gfx.rect(pt.x-w/2, pt.y-10, w,20, 4, {fill:ctx.fillStyle})
nodeBoxes[node.name] = [pt.x-w/2, pt.y-11, w, 22]
}
// draw the text
if (label){
ctx.font = "12px Helvetica"
ctx.textAlign = "center"
ctx.fillStyle = "white"
if (node.data.color=='none') ctx.fillStyle = '#333333'
ctx.fillText(label||"", pt.x, pt.y+4)
ctx.fillText(label||"", pt.x, pt.y+4)
}
})
Mi sapete dire come posso modificare lo script (il primo in alto) per aggiungere della label ai vari nodi?
Grazie!