Show red mark in sigma.js

Question

I am trying to download a gexf file using sigInst.parseGexf ('data / test.gexf').

To create an edge with a label, I have this line in the gexf file:

<edge label="test" id="7" source="14" target="18" type="directed"/> 

but it seems that sigma.js is ignoring this label field.

How can I show border labels in a graph.

Thanks in advance.

Answer 1

This is not possible with the sigma.js core library. However, I just forked the repository and added the feature on github.com here: https://github.com/sam2themax/sigma.js

To enable this new feature, set edgeLabels to true in your drawing properties.

Answer 2

Now you can do this with the new plugin in the sigma repository: https://github.com/jacomyal/sigma.js/tree/master/plugins/sigma.renderers.edgeLabels

Just follow the instructions to create a Sigma project and you will find this file in the / build / plugins folder: sigma.renderers.edgeLabels.min.js

Include this in your html file:

 <script src="sigma.min.js"></script> <script src="sigma.renderers.edgeLabels.min.js"></script> 

Make sure the key labeled

 var data = { // specify 'nodes' as well edges: [ { id: "e1", source: "user", target: "b1", label: "This is the label", // <----- define 'label' key for your edges }, ] } 

And then specify your renderer in Sigma initialization.

 var s = new sigma({ graph: data, renderer: { container: "container", type: "canvas" }, settings: { } }); 

Answer 3

All loans go to @ sam2themax - who forged it. I just add the appropriate parts to make life easier.

In the sigma.js main library - go to the drawEdge (edge) function Add the following lines:

  var p1 = {}; p1.x = sourceCoordinates[0]; p1.y = sourceCoordinates[1]; var p2 = {}; p2.x = targetCoordinates[0]; p2.y = targetCoordinates[1]; drawEdgeLabel(ctx,edge['label'],p1,p2, color); 

Create a new method:

  function drawEdgeLabel(ctx, text, p1, p2, color) { console.log(text); var alignment = 'center'; var padding = 10; var dx = p2.x - p1.x; var dy = p2.y - p1.y; var len = Math.sqrt(dx * dx + dy * dy); var avail = len - 2 * padding; // Keep text upright var angle = Math.atan2(dy, dx); if (angle < -Math.PI / 2 || angle > Math.PI / 2) { var p = p1; p1 = p2; p2 = p; dx *= -1; dy *= -1; angle -= Math.PI; } var p = p1; var pad = 1 / 2; ctx.save(); ctx.textAlign = alignment; ctx.translate(px + dx * pad, py + dy * pad); ctx.rotate(angle); var fontSize = self.p.defaultLabelSize; ctx.font = self.p.fontStyle + fontSize + 'px ' + self.p.font; ctx.fillStyle = color; ctx.fillText(text, 0, -5); ctx.restore(); };