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
32
votes
1 answer

What is the difference between D3.js and Cytoscape.js?

What is the difference between D3.js and Cytoscape.js? Why would someone choose Cytoscape over D3.js?
mblaettermann
  • 1,916
  • 2
  • 17
  • 23
28
votes
1 answer

Add an edge label with Cytoscape.js

How can I add a label on an edge using Cytoscape.js?
user2126217
  • 281
  • 1
  • 3
  • 4
15
votes
4 answers

Cytoscape and ReactJS integration

I am trying to use use Cytoscape with ReactJS and some how nothing is getting displayed in the simple component i am trying. Here is the code. I am returning an empty object in mapStateToProps as i am trying to display a static graph where i have…
Sateesh K
  • 1,071
  • 3
  • 19
  • 45
13
votes
2 answers

Edge target arrows not working in Cytoscape.js >=2.7.0

I noticed that edge source or target arrows are missing when using the current unstable branch (2.7.0-unstable). The standard cy demo show below. Is this a known issue or has something changed?
mbeynon
  • 243
  • 2
  • 8
11
votes
2 answers

Content and Label on a Node - Cytoscape

I'm trying to display nodes that have a font icon in the center of the node using 'content' and a text label underneath. My styling is currently: { 'selector': 'node[icon]', 'style': { 'content': 'data(icon)', 'font-family': 'Material…
Waddas
  • 1,353
  • 2
  • 16
  • 28
11
votes
1 answer

cytoscape.js: wrong mouse pointer position after container change

I use cytoscape.js 2.2.5 to draw a graph in an angular.js app and I can properly select nodes. When the
with the graph moves, the mouse pointer position on the canvas is not updated. That means I have to click on the 'old' position of a node…
Martin Preusse
  • 9,151
  • 12
  • 48
  • 80
10
votes
1 answer

How to control the zoom in/out accuracy in Cytoscape.js

I find that when zoom is enabled, each time I scroll the mouse wheel, the graph becomes too large or too small. Is it possible to control the zoom level, in order to get a proper graph size as we need? The zoom parameter seems not to work.
yetisun
  • 121
  • 2
  • 5
10
votes
1 answer

Cytoscape.js style node based on content

I would like to color my root node a different color than the rest of the nodes on the screen, I have already done some pre-work to identify the value of the root node and have it readily available in a variable. However, in trying to style the…
Paul Giganti
  • 103
  • 1
  • 5
10
votes
3 answers

How do I get the ID of a clicked node in cytoscape.js?

This example in the documentation: cy.on('click', function(evt){ console.log( 'clicked ' + this.id() ); }); Results in: Uncaught TypeError: Object [object Object] has no method 'id' And evt.cyTarget.data() returns undefined.
Dan Tenenbaum
  • 1,809
  • 3
  • 23
  • 35
9
votes
2 answers

Rendering a family tree with d3 or cytoscape

I'm having problems generating a good looking family tree with Javascript. Requirements: Each child should be connected to two parents in the tree, not one as in some graphs I've like spouses to be next to each other in the tree (same vertical…
Emil Stenström
  • 13,329
  • 8
  • 53
  • 75
9
votes
2 answers

Hide and Show Child Nodes on Node Tap Cytoscape

I am trying to create a collapsible tree structure in Cytoscape using breadthfirst layout, to replicate the D3 collapsible tree. I am trying to replicate this type of click action on nodes, but adding restore functionality in addition - Images &…
Chirag A.M.
  • 131
  • 1
  • 8
9
votes
2 answers

Loading and using JSON for Cytoscape.js

Context I want to use cytoscape.js for visualizing graphs. While I am capable with a myriad of languages (C++, Mathematica, R, etc), I am new to Javascript, JSON, HTML, and CSS. Thus it would be favorable to learn these languages through this use…
SumNeuron
  • 4,850
  • 5
  • 39
  • 107
9
votes
3 answers

cytoscape save graph as image by button

I saw in the cytoscape.js tutorial that there are ways to represent the graph as image (png, jpg), but there is a way to represent it as regular graph, and if the user would want he can save it as image by click on button or similar option? Didn't…
Avi
  • 93
  • 1
  • 4
9
votes
2 answers

Set different shapes for different nodes in cytoscape.js

I have the following fields as my nodes data: nodes { data: {id: "something", type: "human"} data: {id: "somethingElse", type: "mouse"} } Is there any way to set the shapes of the nodes based on the type in data?
Tejus
  • 101
  • 1
  • 4
9
votes
1 answer

how to add/connect a new edge to nodes via drag and drop - cytoscape.js

How can I add a new edge to connect 2 nodes via drag and drop? I would like to drag/draw a new edge from node x to node y manually via mouse. It would be greatful, if you could give a working example in jsfiddle or something like that!
Bruno Brummel
  • 93
  • 1
  • 3
1
2 3
…
85 86