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
0
votes
2 answers

multiple graphs in one instance

I'm making view of my switch with cytoscape. Switch has about 40 ports, each port fits nice to the breadthfirst layout. https://i.stack.imgur.com/Ddg2D.png But I need around 40 about same graphs in one page When I'm using breadthfirst with multiple…
How to change username
  • 270
  • 1
  • 11
0
votes
1 answer

How to select also the following nodes after a selection?

I'm currently trying to also select the child edges and child nodes, when selecting a node. I tried the following function: cy.on('tap', 'node', function(event){ this.outgoers().select(); } But it seems that i can't get it to work with 'tap'. I…
Arddor
  • 45
  • 2
0
votes
1 answer

Get edges inside a sub-graph

I don't see an easy way to get the edges of a sub-graph, that is the edges that connect a collection of nodes. The best I can do is to compute the connected edges minus the outgoing edges: function getInsideEdges(nodes) { var connectedEdges =…
Alsciende
  • 26,583
  • 9
  • 51
  • 67
0
votes
1 answer

cytoscape.js qtip content dissapears

I'm implementing a graph based on a cytoscape.js example from the official website(this example). The problem is that even in their example, if you click the same node twice(see the steps bellow) the qtip will be empty the second time. Here is the…
miraco
  • 298
  • 5
  • 10
0
votes
2 answers

Cytoscape.js: Needed linear layout

I am trying to use cytoscape.js to create network diagram. There are couple of layout which will design nodes and links from upward to downward. One of them is "dagre" layout. But, what I want is do display the same layout from left to right. But I…
user3607722
  • 3
  • 4
0
votes
1 answer

How to set the edge's length in cytoscape.js with cola?

I am using the latest version of cytoscape.js and cola.js. When I change "edgelength" nothing happens. how can I do this?
Sébastien Michel
  • 3
  • 2
0
votes
0 answers

how to use sytoscape.js in dotnetnuke module for creating graph

I using dotnetnuke and I need to create a web base online graph in a dotnetnuke module. How to create a graph in asp.net c# web application using Cytoscape.js and totally how to use Cytoscape.js in asp.net web application?
reihaneh
  • 225
  • 4
  • 18
0
votes
1 answer

cytoscape edgehandles: customize complete function

I'd like to trigger an event (change the data of source and target nodes) when edge creation is complete using js.cytoscape edgehandles. I need this to happen only when the edge has definitely been created (see Note below). How can I achieve this?…
umbolt
  • 23
  • 6
0
votes
1 answer

Parent nodes not rendering when using 'cola' layout

I was hoping to use parent nodes with the cytoscape.js 'cola' layout. When changing the 'Compound nodes' demo's layout from 'cose' to 'cola', the 'b' and 'e' parents do not render. The cola.js home site has examples showing parent-like features.
jscoder
  • 1
0
votes
1 answer

Why are nodes moving after the "layoutstop" event has been raised?

I want to launch a new springy layout when a node is moved. To do so, I listen to the "position" event on nodes and set a "moving" flag on that node and turn off position change notification. Then when the node is freed, I check if it has moved and…
Melanie
  • 1,198
  • 2
  • 17
  • 42
0
votes
1 answer

Set edge length with circle layout in cytoscape.js

Using cytoscape.js how to set the length of all edges in graph having 'circle' layout as well as with 'grid' layout? Thanks !
smita chougale
  • 235
  • 5
  • 19
0
votes
1 answer

Upon running the demo file that I downloaded (qtip extension in cytoscape). I am not getting any tooltip

I'd like to use cytoscape.js-qtip. There are no tool-tips shown on mouse-over upon running the demo file Here's the link pointing to the demo file demo.html. Is this extension for qtip1 or qtip2? I have already gone through this thread - How to…
vstack
  • 91
  • 1
  • 10
0
votes
1 answer

setting the start position of the edge from node in cytoscape.js

How do I set the position of the edge from the node i.e. the edge should origin only from that location from the node(e.g. top,center,bottom,etc).Sometimes node labels and the edges of some nodes are overlaping each other. If it is possible to set…
Radhika
  • 41
  • 1
  • 7
0
votes
1 answer

How can I change the shape and z-index of the overlay in cytoscape.js?

I would like to have an overlay that is not over the label and that has the same shape than the node it is on. How could I extend cytoscape.js or reuse existing functionnality to do so? I tried to use border to achieve this result, but what I don't…
Melanie
  • 1,198
  • 2
  • 17
  • 42
0
votes
2 answers

Setting variable limits for cytoscape.js mapData

Quick question. I am trying to use cytoscape's.js mapData linear mapper to set the colour of edges in a small plot. There is, however, a small problem. The following example works without a hitch. .selector('edge') .css({ 'line-color':…
horacv
  • 73
  • 1
  • 1
  • 10
1 2 3
…
85 86