Cytoscape.js combine multiple edges into one (thicker) edge

Question

I'm using cytoscape.js 3.19.1 and I cannot figure out how to combine multiple edges into one, and have the weight increased of that one edge.

Current view

I am now looking for a solution where 2 edges get combined into one with a width of 2, 3 edges combined into one with a width of 3, etc.

I am changing the color of the nodes with this code:

style: [
        {
            selector: 'node',
            css: {
                'content': 'data(name)',
                'text-outline-color': 'red',
            },
            style: {
                'background-color': 'data(color)',
                'label': 'data(name)',
                'color': "white",
            }
        },
        {
            selector: 'edge',
            css: {
                'curve-style': 'bezier',
                'target-arrow-shape': 'triangle'
            }
        }
    ],

and this cytoscape input works: {'nodes': [{'data': {'id': '1464848862', 'name': 'my_name', 'color': '#FFA00F'}}....

I could now do the same for the line width but I would rather not having to go through the data 'manually' to figure out which 2 nodes get connected, how often that happens, define how thick that lines has to be and then remove all the duplicates that no longer need to be drawn.

Is there any other way?

Many thanks for any suggestions!

Answer 1

Actually, you might achieve this using some different styles on the edges. "haystack" or "straight" might be useful. Check them https://js.cytoscape.org/demos/edge-types/

Or you might use https://github.com/iVis-at-Bilkent/cytoscape.js-expand-collapse

Check its demo and collapse the edges.