Increase width of selected edges only (cytoscape.js)

Question

How can I predefine when I select a few nodes that are connected or simply edges, to make the width of the selected edges be bigger, without affecting the rest of edges of the entire network or the node's width?

I predefined this when the nodes or edges are selected:

$('#cy').cytoscape({
  style: cytoscape.stylesheet()
    .selector(':selected')
      .css({
        'background-color': 'black',
        'line-color': 'red',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black',
        'opacity': 1
      })...

but there is no 'line-width', so if I put 'width': 5 it will appy it to all the edges and nodes.

So how could I modify the edge width just when selected and leaving the same the rest of the graph?

Thanks in advance!

Can you provide http://jsfiddle.net/ with http://stackoverflow.com/help/mcve ? — xmojmr, Jan 14 '15 at 05:46
I made this example in JSbin [link](http://jsbin.com/kezujedilu/1/edit) — DanielBoloc, Jan 14 '15 at 09:26

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

Cytoscape.js → Selectors

...A selector functions similar to a CSS selector on DOM elements, but selectors in Cytoscape.js instead work on collections of graph element... The selectors can be combined together to make powerful queries... Selectors can be joined together (effectively creating a logical OR) with commas... node, edge, or * (group selector) Matches elements based on group (node for nodes, edge for edges, * for all)...

In order to apply style only to selected edges use selector for selected edges.

$('#cy').cytoscape({
  style: cytoscape.stylesheet()
    .selector(':selected')
      .css({
        'background-color': 'black',
        'line-color': 'red',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black'
      })
      .selector('edge:selected')  // ← ← ← ← ←
        .css({
          'width': 5
      })...

jsFiddle demo: http://jsfiddle.net/xmojmr/rbuj3o9c/2/

Increase width of selected edges only (cytoscape.js)

1 Answers1

Linked