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:
Mi sapete dire come posso modificare lo script (il primo in alto) per aggiungere della label ai vari nodi?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) } })
Grazie!

Rispondi quotando