adding labels to edges of rgraph

[Danica Damljanovic]

Hi,

I would like to know if there is any way to add labels to RGraph edges.
Earlier I have found out on this list that the way to do it (with Spacetree) is to set type of the node to 'none' and that worked perfectly well.  It works for RGraph as well (I mean hiding nodes), but, as it treats hidden nodes as any others. the relations between nodes which are not hidden could be broken (not straight). For example, if I have:
node 1 - hiddenNode - node 2
I do want straight line between node1 and node2, always. At the moment, based on the other content of the graph, and also based on the node which is selected and centered, it can break this connection.

Any hints?

--
Best,
Danica Damljanovic
--
Research Associate
GATE team http://gate.ac.uk
Natural Language Processing Group
University of Sheffield
http://www.dcs.shef.ac.uk/~danica

[Nico Garcia Belmonte]

Hi Danica,

What kind of JSON structure are you using to feed the visualization?

Where are you currently storing the edge label text?

--
I would never die for my beliefs because I might be wrong.

Bertrand Russell

[Danica Damljanovic]

Hi Nico,

I use json graph structure as explained in this example:
http://thejit.org/Jit/Examples/RGraph/example2.code.html
The reason I use RGraph and not HyperTree is because I need arrows on edges.

I populate json structure dinamically from ontology structure.
On the server side, I have list of nodes of different types. One specific type I would like to hide (property type in the ontology), or to use its name to populate label of the edge. That specific node is always referred by one ane only one adjacency from some other node, and it also has one and only one adjacency itself - always.

I would be able to store the edge text somewhere in adjacency (by populating data field in the adjacencies for example), when creating json structure from my internal structure.

For visualization, I use code from example3:
http://thejit.org/Jit/Examples/RGraph/example3.html

Thanks and regards,
Danica

2009/8/16 Nico Garcia Belmonte <phi...@gmail.com>

[Nico Garcia Belmonte]

Hello again,

I made a couple of workarounds to the example2 code for adding labels to edges.
Since this is not a built-in feature for the RGraph the code might look a little complicated at first sight.

The approach I've taken is to:

1) Add some custom code for creating a new custom EdgeType for the RGraph that plots an edge and also creates and places an edge label.

2) Then I set the edge.type property in the rgraph constructor as 'custom-line' for using this new edge type.

3) These edge labels are created when the adjacency data object contains the labelid and labeltext properties.

I attach the example2.js modified code in this message.

At line 33 I add an adjacency with labelid and labeltext parameters:

33         "adjacencies": [{ 
 34             "nodeTo": "node1",
 35             "data": {     
 36                 "weight": 3,
 37                 "labeltext":"some label text", 
 38                 "labelid":"node0-node1"        
 39             }

Then I define a new EdgeType just like specified in the documentation:
(This is kind of advanced so if you have any question about this code I'll be happy to help!)

http://thejit.org/docs/files/RGraph-js.html#RGraph.Plot.EdgeTypes

268     RGraph.Plot.EdgeTypes.implement({
269      'custom-line': function(adj, canvas) {
270         //plot arrow edge
271         this.edgeTypes.arrow.call(this, adj, canvas);
272         //get nodes cartesian coordinates
273         var pos = adj.nodeFrom.pos.getc(true);
274         var posChild = adj.nodeTo.pos.getc(true);
275         //check for edge label in data
276         var data = adj.data;
277         if(data.labelid && data.labeltext) {
278           var domlabel = document.getElementById(data.labelid);
279           //if the label doesn't exist create it and append it
280           //to the label container
281           if(!domlabel) {
282             domlabel= document.createElement('div');
283             domlabel.id = data.labelid;
284             domlabel.innerHTML = data.labeltext;
285             //add some custom style
286             var style = domlabel.style;
287             style.position = 'absolute';
288             style.color = '#fff';
289             style.fontSize = '9px';
290             //append the label to the labelcontainer                                                                                             
291             this.getLabelContainer().appendChild(domlabel);
292           }
293          
294           //now adjust the label placement
295           var radius = this.viz.canvas.getSize();
296           domlabel.style.left = parseInt((pos.x + posChild.x
297             + radius.width - domlabel.offsetWidth) /2) + 'px';
298           domlabel.style.top = parseInt((pos.y
299             + posChild.y + radius.height) /2) + 'px';
300         }
301      }
302     });

Now I set that EdgeType in the rgraph constructor:

318         Edge: {
319             'overridable': true,
320             'color': '#cccc00',
321             'type': 'custom-line'
322         },


And I think that's it :)

Hope it helps,

[Danica Damljanovic]

Fantastic, thanks a million, Nico!
It (of course) works:)
Danica

2009/8/17 Nico Garcia Belmonte <phi...@gmail.com>

[Karan Singh]

Hi,

I am trying to use your code for adding label to edges, but its not working out.....
please help me out.....
its showing that canvas element is not getting defined

[nverwer]

The previously posted code did not work for me either. I resorted to implementing native canvas labels, as follows:

          $jit.RGraph.Plot.EdgeTypes.implement({
            'labeled': {
              'render': function(adj, canvas) {
                this.edgeTypes.arrow.render.call(this, adj, canvas);
                var data = adj.data;
                if(data.labeltext) {
                  var ctx = canvas.getCtx();
                  var posFr = adj.nodeFrom.pos.getc(true);
                  var posTo = adj.nodeTo.pos.getc(true);
                  ctx.fillText(data.labeltext, (posFr.x + posTo.x)/2, (posFr.y + posTo.y)/2);
                }// if data.labeltext
              }
            }
          });