Clever Geek Handbook

Increase width of only selected edges (cytoscape.js)

How can I predetermine when I select multiple nodes that are connected or just by edges to increase the width of the selected edges without affecting the rest of the edges of the entire network or the width of the node?

I have predefined this when 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 no 'line-width'

, so if I put 'width': 5

it it will snap to all edges and nodes.

So how could I change the edge width only when it was selected and leave the rest of the graph?

Thanks in advance!

+3


source to share


1 answer


Cytoscape.js -> Selectors

... A function selector is similar to a CSS selector on DOM elements, but the selectors in Cytoscape.js operate on graph element collections instead ... Selectors can be combined together to make powerful queries ... Selectors can be combined together (effectively creating a boolean OR) with commas ... node

, edge

or *

(group selector) Matches items based on group ( node

for nodes, edge

for edges, *

for all) ...

To apply the style to selected edges only, use the 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/

+4


source






More articles:


All Articles