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

user_615924 0
Viewed 803

I'm trying to draw edges in a sigma.js graph DOTTED and CURVED. I'm using customEdgeShapes and curve plugins but I cannot combine two different styles in the same edge. In fact I can only apply a single style to the type attribute:

edge.type = 'curvedArrow';

or

edge.type = 'dotted';

How can I apply both styles to an edge?

sigma.js graph javascript
2 Answers

I've been using Sigma.js for a week or two now and think that there are a few ways to do what you want. I've used this method to differentiate node-colors based on properties. The code below is written on the top of my (confused) head, thus untested, it might be wrong.

First way is when you are pushing the edges to start building the graph (In my case pushing happens by taking the JSON-argument that contains all nodes and edges and start parsing them to make my sigma instance). This goes by creating a function that takes in a conditional that you'd use to determine if it's a line or dotted.

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 would be to iterate over all your edges after they've been drawn. You'd again want to make a function that takes one argument (determinator) and return the line style you want.

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);
  });

I hope this helps.

user_71634190

"Thanks for your answer, but I want to have an edge that is both curved AND dotted. Maybe the only way is to rewrite the plugin... – rvandoni"

I needed something similar and yes it seems like it is the only way.

To ease things out:

Add:

context.setLineDash([6,6]); // numbers describe length of drawn line then blank, so you may want different values.

in file: "sigma.canvas.edges.curvedArrow.js"

Right before code:

context.setLineDash([6,6]); // <---
context.strokeStyle = color;
context.lineWidth = size;
context.beginPath();
context.moveTo(sX, sY);
if (source.id === target.id) {
  context.bezierCurveTo(cp.x2, cp.y2, cp.x1, cp.y1, aX, aY);
} else {
  context.quadraticCurveTo(cp.x, cp.y, aX, aY);
}
context.stroke();

You probably want both versions so just copy/create new function for it or parametrise.

user_80608980
Related