CODEWITHSUNDEEP
cytoscape.js
ForgottenKahz
ForgottenKahz

Reputation: 276

Cytoscape.js Getting IDs For All Nodes Selected

I'm using Cytoscape.js to represent a network diagram. I can highlight more than one node at a time by selecting the first node followed by the second node while holding the shift key.

How can I have all the node ids that I have selected available in Javascript? For example and this would be ideal, if all the node ids that have simultaneously selected where organized into a Javascript list.

I looked in the cytoscape.js docs and could not find the location where this is described.

Upvotes: 2

Views: 2871

Answers (2)

til
til

Reputation: 1225

step by step

first we need to select the elements we're interested in (eg like in Alsam's answer)

const typeIds = cy.elements(':selected');

to actually receive the ids of the collection, the ids need to be reduced from the collection.
as the id sits in data, we need to receive data for the whole collection.

// plural: jsons
const alldata = cy.elements(':selected').jsons();

then we can reduce:

const ids = alldata.reduce((acc,obj) => [...acc, obj.data.id], [])

all in one line:

const ids = cy.elements(':selected').jsons().reduce((acc,obj) => [...acc, obj.data.id], [])

Upvotes: 0

Alsam
Alsam

Reputation: 26

To receive ids of all selected:

  • elements
    var typeIds = cy.elements(':selected');
  • nodes
    var typeIds = cy.elements('node:selected');
  • edges
    var ConnIds = cy.elements('edge:selected');

In order to get Ids of all selected nodes you could try this:

cy = window.cy = cytoscape ({ 
             container : document.getElementBy('cy'),
             // define a style for selected node
             style : cytoscape.stylesheet()
                     .selector('node')
                     .css ({..............})
                     .selector('edge')
                     .css({...............})
                     .selector('node:selected')
                     .css({ 'border-color' : 'red'})
                     }),
               elements : eles,
               layout : {.............}
               });

Upvotes: 1

Related Questions