Directed edges in sigma.js - a minimal example

Question

Question

What is necessary to produce directed edges in sigma.js? I'm looking for a minimal example that is preferably based off of the minimal example currently on their home page.

Attempts

I tried adapting the minimal graph example from the sigma.js homepage in the following way

  sigma.parsers.json('data.json', {
    container: 'container',
    settings: {
      defaultNodeColor: '#ec5148',
+     defaultEdgeArrow: 'source'  // adding this line should add arrows?
    }
  });

Sadly this did not produce different results.

I also tried modifying the edges in the graph itself

"edges": [
 {
    "id": "e0",
    "source": "n0",
    "target": "n1",
+   "arrow": "source"
 },
 ...,
 ]

But again this had no effect.

More complex examples

Edge arrow rendering was added in this pull request. This links to a couple of examples here and here

Answer 1

I've been struggling with this issue myself. It looks like sigma.js underwent a major redesign in the last few months and the code from the examples is from an older version of sigma.js.

They do have the ability to render arrows, but the settings to generate these have changed and some of the options were lost (no longer can you specify target, source, or both; you only can use target):

"edges": [
{
    "id": "e0",
    "source": "n0",
    "target": "n1",
+    "type": "arrow",
},
...,
]

"curvedArrow" is also a valid option for type.

See this issue transcript: https://github.com/jacomyal/sigma.js/pull/219 for more information.

Answer 2

I was struggling with it for a few hours. I was able to find a working example at https://www.bsimard.com/2018/04/25/graph-viz-with-sigmajs.html .

The things you need: - add 'type: "arrow"' to the node properties

"edges": [
{
  "id": "e0",
  "source": "n0",
  "target": "n1",
+ "type": "arrow",
},
 ...,
]

and in the Sigma constructor set minArrowSize, also for me it is only working with canvas.

s = new sigma({
 graph: data,
 renderer: {
  container: document.getElementById('graph-container'),
  type: 'canvas'
 },
 settings: {
  minArrowSize: 10
 }
});