Add label to edges in arbor.js (Query plugin)

Question

How do I add labels to edges in arbor.js It is a graph visualization library.

Suppose A and B are nodes and E is the edge One crude way would be insert a "text node" T and join A-T and T-B

But i don't want to this, is there any other way?

Here's the sample code

var theUI = {
  nodes:{A:{color:"red", shape:"dot", alpha:1}, 
      B:{color:"#b2b19d", shape:"dot", alpha:1}, 
      C:{color:"#b2b19d", shape:"dot", alpha:1}, 
      D:{color:"#b2b19d", shape:"dot", alpha:1},
  },
  edges:{
      A:{
          B:{length:.8},
          C:{length:.8},
          D:{length:.8}
           }
  }
}

var sys = arbor.ParticleSystem()
sys.parameters({stiffness:900, repulsion:2000, gravity:true, dt:0.015})
sys.renderer = Renderer("#sitemap")
sys.graft(theUI)

In this, A is connected to B, C and D. How to supply label to edges?

If you don't add more description to this, such as, code, things you've tried, links to the plugin, or *something* that actually **helps** people help you, this will get closed. — Incognito, Sep 21 '11 at 11:54

Andrei LED · Accepted Answer · 2011-09-22T06:03:55.650

arbor.js allows you to write a code to render the whole graph. You can do whatever you want in render method including drawing edges titles which you can store in a separate map.

Just override method render in Renderer this way:

redraw:function()
{
    ctx.fillStyle = "white";
    ctx.fillRect (0,0, canvas.width, canvas.height);

    particleSystem.eachEdge (function (edge, pt1, pt2)
    {
        ctx.strokeStyle = "rgba(0,0,0, .333)";
        ctx.lineWidth = 1;
        ctx.beginPath ();
        ctx.moveTo (pt1.x, pt1.y);
        ctx.lineTo (pt2.x, pt2.y);
        ctx.stroke ();

        ctx.fillStyle = "black";
        ctx.font = 'italic 13px sans-serif';
        ctx.fillText (edge.data.name, (pt1.x + pt2.x) / 2, (pt1.y + pt2.y) / 2);

    });

    particleSystem.eachNode (function (node, pt)
    {
        var w = 10;
        ctx.fillStyle = "orange";
        ctx.fillRect (pt.x-w/2, pt.y-w/2, w,w);
        ctx.fillStyle = "black";
        ctx.font = 'italic 13px sans-serif';
        ctx.fillText (node.name, pt.x+8, pt.y+8);
    });       
   };

This code expected data property of each edge to be filled while initialization.

I create all nodes and edges manually using my custom map and methods addNode/addEdge, bu I suppose you can change a little your code to initialize edges with custom data this way:

var theUI = {
  nodes:{A:{color:"red", shape:"dot", alpha:1}, 
      B:{color:"#b2b19d", shape:"dot", alpha:1}, 
      C:{color:"#b2b19d", shape:"dot", alpha:1}, 
      D:{color:"#b2b19d", shape:"dot", alpha:1},
  },
  edges:{
      A:{
          B:{length:.8, data:{name:"A->B"}},
          C:{length:.8, data:{name:"A->C"}},
          D:{length:.8, data:{name:"A->D"}}
           }
  }
}

P.S.: take a look at this example, I learned a lot from it.

Thanks, Although I did not do exactly as this, but it did gave me a pointer to how to do it. I used gfx obejct (of type arbor.Graphics) and used gfx.text() function. — chinmayv, Sep 22 '11 at 16:34
This code doesn't work. Can you post the gtx.text() method or provide a more complete code example? — gregm, Nov 30 '11 at 19:22

score 0 · Answer 2 · answered Apr 16 '15 at 18:58

0

edge.data is {length:.8, data:{name:"A->B"}} so replace the last line of the method particleSystem.eachEdge() with the following code

ctx.fillText (edge.data.data.name, (pt1.x + pt2.x) / 2, (pt1.y + pt2.y) / 2);

which worked for me.

answered Apr 16 '15 at 18:58

Krishna Sapkota

3,194
2
14
10

Add label to edges in arbor.js (Query plugin)

2 Answers2

Linked