CODEWITHSUNDEEP
graphcolorsstackcytoscape.jsedges
Arkeen
Arkeen

Reputation: 604

Stacked edges with Cytoscape.js

I would like to be able to display several informations on one line (edge) using colors, with cytoscape.js. I could display it on several edges, but with bezier curves this would dramatically increase the complexity of the visual result, and straight edges are overlapping, I can find a way to offset them ...

Here is an exemple of a desired output, looking at the pink yellow and dark magenta lines :

Transportation edges map, with lines being offset instead of overlapping (A solution with the 3 colors dashed along the line would also fit, but it seems I cannot do that with cytoscape.js either.)

Any idea about how to do this ? Or about another way to show such information with colors ?

Upvotes: 0

Views: 697

Answers (1)

maxkfranz
maxkfranz

Reputation: 12242

You can control the edge endpoints with visual style properties: https://js.cytoscape.org/#style/edge-endpoints

For example, all red edges might have source-endpoint: 0 -5px and all yellow edges might have source-endpoint: 0 5px. You'll need to address both source- and target-sided endpoints, and you'll need to co-ordinate the line widths appropriately to eliminate whitespace.

You can alternatively use bundled bezier edges with a low control point step size. Those edges will taper towards the nodes, however.

As of August 2019, there is no set of style properties for automatic "candy stripe" edges.

Upvotes: 0

Related Questions