How to apply two different types to an edge in sigma.js

Question

I am trying to draw edges in sigma.js DOTTED and CURVED . I use customEdgeShapes and curve plugins, but I cannot combine two different styles in the same edge. In fact, I can only apply one style to the type attribute:

 edge.type = 'curvedArrow'; 

or

 edge.type = 'dotted'; 

How to apply both styles to an edge?

Answer 1

I have been using Sigma.js for a week or two now and I think there are several ways to do what you want. I used this method to distinguish node-colors based on properties. The code below is written on top of my (confused) head, so it’s not verified, it may be wrong.

The first way is when you click the edges to start plotting (in my case, the click occurs by accepting the JSON argument, which contains all the nodes and edges, and start parsing them to create my sigma instance). This happens by creating a function that takes a conditional expression that you would use to determine if it is a string or a dotted line.

 function determinetype(determinator){ if (determinator === "parent"){return "dotted"} else if (determinator === "grandparent"){return "line"} }; for (var i = 0; i<graph.edges.length; i++){ var edgetype = determinetype(graph.edges[i]["conditional_markup"]); g.edges.push({ id:graph.edges[i]["id], source: graph.edges[i]["source"], target: graph.edges[i]["target"], type: edgetype, }) } 

The second way is to iterate over all your edges after they are drawn. You again want to make a function that takes one argument (determinant) and returns the desired line style.

 function get_type(determinator){ if (determinator === "parent"){return "dotted"} else if (determinator === "grandparent"){return "line"} }; s.graph.edges().forEach(function(edge){ edge.type = get_type(edge.conditional_markup); }); 

Hope this helps.