Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can i customize edges in cytoscape.js so that lines are dashed and animated/flashing?

I have graph in cytoscape.js and i want some of the edges to be dashed (or something similar) and a specific edge to have an effect animation like (blinking, animated, having something moving over it ..something like that). Are there any examples?

like image 538
galatia Avatar asked Oct 19 '25 03:10

galatia


1 Answers

You can find these things at the official documentation:

In order to make edges dotted or dashed, do as said here

cytoscape({
    container: document.getElementById('cy'),
    elements: {
        nodes: [
            ...
        ],
        edges: [
            ...
        ]
    },

    layout: {
        ...
    },    
    style: [{
        selector: 'edge',
        style: {
            'line-style': 'data(style)' //e.g dotted
        }
    }]
});

Animations are also explained in the docs here. If you need help with the animations, you will have to be more specific and provide the code (what you have tried already).

like image 89
Stephan T. Avatar answered Oct 21 '25 18:10

Stephan T.



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!