Stack Overflow
Stack Overflow

Questions tagged [cytoscape.js]

Cytoscape.js is a JavaScript graph theory / network library for analysis and visualisation (Compatible with CommonJS/Node.js/Browserify/Webpack, AMD/Require.js, jQuery, npm, Bower, jspm, Meteor/Atmosphere, and plain JS/JavaScript)

Cytoscape.js is, according to its website, a JavaScript graph library for analysis and visualisation (compatible with Node.js, jQuery 1.4+, and plain JavaScript).

Cytoscape.js allows you to easily display graphs in your websites and contains a slew of useful functions in graph theory. You can use Cytoscape.js headlessly on Node.js to do graph analysis in the terminal or on a web server.

Related tags :

Asking a question:

  • Reduce your issue to a small example
  • Explain the behavior you experienced and its difference from your expectations
  • Post a reduced working code on codepen.io, plnkr.co or jsfiddle.net

Getting started :

Community:

Advantages:

  • A fully featured graph library written in pure JS
  • Highly optimised
  • Documentation includes live code examples, doubling as an interactive requirements specification
  • Fully serialisable and deserialisable via JSON
  • Uses layouts for automatically or manually positioning nodes
  • For more information please click here
1285 questions
9
votes
6 answers

Cytoscape.js Check for double Click on nodes

I have a question. Is there a possibility to bind a double click Mouse Event to a node? In the documentation, there is only 'click'. Thanks for your help!
Lostizzet
  • 171
  • 1
  • 3
8
votes
4 answers

which library to use to draw simple graphs nodes,links in react?

I see react-d3. The last I used it for charts (prior to React), it was great until the layout of legends, margins, labels on the axes need adjusting. Using c3 and other libs on top of d3, made things easier. Now I need to draw graphs - random…
user3213604
  • 407
  • 1
  • 7
  • 18
8
votes
4 answers

How to highlight neighbouring nodes in Cytoscape.js

I am using cytoscape.js and would like to add the feature on mouseover or tap of a node to apply a style to: change the style of the neighbouring nodes - 1st degree fade out the nodes that are not connected I seem to be able to get the…
moonlife
  • 81
  • 1
  • 4
8
votes
1 answer

Change default size of nodes

I'm starting to use this awesome library and I want to do a very simple thing: change the size of my nodes. When I get the nodes from my server, they have a size attribute, which is an integer between 1 and 6. I would like to display the size of the…
user4083185
8
votes
1 answer

select nodes whose attribute (array-type) contains a certain value with cytoscape.js

I am currently visualizing a network where the nodes have an attribute of type list, example: {"data": {"name": "b", "go": ["c", "d", "f"], "id": "n0"}, "group": "nodes"}, {"data": {"name": "a", "go": ["a", "b", "c"], "id": "n1"}, "group":…
Qerubin
  • 212
  • 4
  • 12
8
votes
1 answer

How can I set a multiple text lines in Cytoscape.JS node content?

I have some cytoscape nodes with style: cytoscape.stylesheet() .selector('node') .css({ 'border-color': '#0266C8', 'border-width' : '1px', 'shape': 'data(faveShape)', 'width': '80px', …
Magno C
  • 1,922
  • 4
  • 28
  • 53
7
votes
1 answer

Dynamically adding nodes to Cytoscape

My company is building a graph-view editor for chatbots. We are using Cytoscape along with the cytoscape-cola extension to accomplish this. One of the issues we are facing is dynamically adding new nodes to the graph without them overlapping with…
iAMdifferent
  • 73
  • 7
7
votes
2 answers

Show and hide node info on mouseover in cytoscape

I am working on a cytoscape.js graph in browser. I want to show some information of nodes (e.g. node label) as the mouse hovers over the nodes in a cytoscape graph. The following code is working for console.log() but I want to show the information…
user10340258
  • 339
  • 1
  • 5
  • 15
7
votes
1 answer

Replace all elements and redraw graph softly in cytoscape.js

Is there any one-command way to replace all elements of my graph with new data in cytoscape.js? In my case, after some operations on backend I have new graph-data and want to redraw my graph with this new data, but not to lose my camera settings,…
Alarmwolf
  • 158
  • 1
  • 6
7
votes
1 answer

How to wrap the text inside a shape using Cytoscape?

I'm trying to build tiles using Cytoscape. Basically, each rectangle (tile) has a title and I want it to be written within the limits of that rectangle. My code is: var cy = cytoscape({ container: document.getElementById('cy'), style: [ { …
user882670
7
votes
1 answer

Avoid edge-node overlapping in cytoscape.js

Created graph using cytoscape.js. I have set the layout to 'grid'. Need to resolve following problem: original graph- There is edge from Host3 to Host1 as well as from Host5 to host1,Edge from Host 5 to Host 1 overlapping the edge from Host3 to…
smita chougale
  • 235
  • 5
  • 19
7
votes
1 answer

How to improve spacing in 'cose' layout in cytoscape.js?

I'm using cytoscape.js 2.3.9 and I'm playing with some layouts. I'm now rendering about 150 nodes, but I wish to go up till 1000-1500. There are about 25 nodes with 1-50 posible childs. My best approach for what I need has been with 'cose' layout,…
exoddus
  • 2,230
  • 17
  • 27
7
votes
2 answers

How do I make classes work in Cytoscape.js

I am trying to add a class to the node, to have all my css in a stylesheet file, not inside javascrpt declaration. var values = { nodes: [ { data: { id: 'explore'}, classes: 'ClassName1' }, { data: { id: 'discover' }…
maxim fedotov
  • 87
  • 3
  • 6
7
votes
1 answer

cytoscape.js zoom to fit currently selected nodes

I wish to zoom the cyjs view to fit (nicely contain) the currently selected nodes. nodes could be selected manually, or programmatically. If only a small network neighborhood has been selected, then the zoom-in would be pretty dramatic. If…
paul shannon
  • 355
  • 5
  • 15
7
votes
2 answers

How to add tooltip on mouseover event on nodes in graph with cytoscape.js

I want to show node's details on mouseover event on all nodes in graph created with cytoscape.js. I have found a plug-in qtip, but this is not working. How can i achieve this? Is there some other way to show tooltip on nodes? Thanks in advance.
hp36
  • 269
  • 1
  • 6
  • 20
1
2
3
…
85 86