How to get cytoscape.js to work - javascript

I'm having problems getting a very simple cytoscape.js example to work at all. Here is my code in a pastebin link
I'm fairly new to Javascript in general, so this may be a very basic mistake. console.log statements put through the function calls indicate that the cy function is getting properly called and executed, and the browser console doesn't seem t throw any errors, however I cannot get the graph to show. Is there anything that I'm missing in my definition?
I tried to make it as minimalistic as possible. The code is only verbatim copied from some of the cytoscape.js examples. cy.cytoscape is the relevant function. Calling code is at the bottom
$('#cy').cytoscape({
.......
<body>
<div id="cy"></div>
</body>
edit: jsfiddle link

I have made some changes in your code.Now it is working fine.
Please look at the link below
CSS
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
JavaScript
$(function() { // on dom ready
$('#cy').cytoscape({
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'text-valign': 'center',
'color': 'white',
'text-outline-width': 2,
'text-outline-color': '#888'
})
.selector('edge')
.css({
'target-arrow-shape': 'triangle'
})
.selector(':selected')
.css({
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),
elements: {
nodes: [{
data: {
id: 'j',
name: 'Jerry'
}
}, {
data: {
id: 'e',
name: 'Elaine'
}
}, {
data: {
id: 'k',
name: 'Kramer'
}
}, {
data: {
id: 'g',
name: 'George'
}
}],
edges: [{
data: {
source: 'j',
target: 'e'
}
}, {
data: {
source: 'j',
target: 'k'
}
}, {
data: {
source: 'j',
target: 'g'
}
}, {
data: {
source: 'e',
target: 'j'
}
}, {
data: {
source: 'e',
target: 'k'
}
}, {
data: {
source: 'k',
target: 'j'
}
}, {
data: {
source: 'k',
target: 'e'
}
}, {
data: {
source: 'k',
target: 'g'
}
}, {
data: {
source: 'g',
target: 'j'
}
}]
},
ready: function() {
window.cy = this;
// giddy up...
cy.elements().unselectify();
cy.on('tap', 'node', function(e) {
var node = e.cyTarget;
var neighborhood = node.neighborhood().add(node);
cy.elements().addClass('faded');
neighborhood.removeClass('faded');
});
cy.on('tap', function(e) {
if (e.cyTarget === cy) {
cy.elements().removeClass('faded');
}
});
}
});
}); // on dom ready
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<body>
<div id="cy"></div>
</body>

Related

How to make a weighted graph in Cytoscape.js?

Im new to cytoscape, I have read the docs but can't find something that helps. Is there a way to make something like this (a weighted graph) in Cytoscape.js?:
I just need to know how to display the weight of the edge.
So far I have this:
elements: [
// list of graph elements to start with
{
// node a
data: { id: "a" },
},
{
// node b
data: { id: "b" },
},
{
// edge ab
data: { id: "ab", weight: 3, source: "a", target: "b" },
},
],
But adding a weight to the edge doesn't display the weight in the graph:
You can use 'label': 'data(weight)' in your css for the edge to show the weight property as a label of the edge. You can also adjust styling of this label as detailed here. I applied two of them (text-margin-y and text-orientation) in the below sample.
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
layout: {name: 'grid', rows: 2},
style: [{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center'
}
},
{
selector: 'edge',
css: {
'label': 'data(weight)',
'text-margin-y': 15,
'text-rotation': 'autorotate'
}
}
],
elements: {
nodes: [{
data: {
id: 'n0'
}
},
{
data: {
id: 'n1'
}
},
{
data: {
id: 'n2'
}
},
{
data: {
id: 'n3'
}
}
],
edges: [{
data: {
id: 'n0n1',
source: 'n0',
target: 'n1',
weight: 3
}
},
{
data: {
id: 'n1n2',
source: 'n1',
target: 'n2',
weight: 5
}
},
{
data: {
id: 'n2n3',
source: 'n2',
target: 'n3',
weight: 7
}
}
]
}
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 95%;
width: 95%;
left: 0;
top: 0;
position: absolute;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://unpkg.com/cytoscape#3.10.0/dist/cytoscape.min.js">
</script>
</head>
<body>
<div id="cy"></div>
</body>
</html>

Cytoscape.js - Find all common nodes and retain them

I have a graph: B -> A, C -> A, C -> D where node B and node C are of the same type.
I would like to find and retain only the common nodes shared between the nodes which is node A.
How do i filter and remove out the nodes C -> D while retaining the rest of the graph?
You can filter the graph with some handy methods:
// get node a
let node_a = cy.$('#a');
// get edges to -> b and c
let connected_edges = node_a.connectedEdges()
// get source and target nodes -> a, b and c
let connedted_nodes = connected_edges.connectedNodes()
// get target nodes -> b and c
let target_nodes = connected_edges.targets()
// Then you can remove the unwanted nodes (you may have to manage the edges too)
let removed_nodes = cy.remove(cy.nodes().not(connected_nodes)
Here is a working example:
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
style: [{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center',
'height': '60px',
'width': '60px',
'border-color': 'black',
'border-opacity': '1',
'border-width': '10px'
}
},
{
selector: '$node > node',
css: {
'padding-top': '10px',
'padding-left': '10px',
'padding-bottom': '10px',
'padding-right': '10px',
'text-valign': 'top',
'text-halign': 'center',
'background-color': '#bbb'
}
},
{
selector: 'edge',
css: {
'target-arrow-shape': 'triangle'
}
},
{
selector: ':selected',
css: {
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
}
}
],
elements: {
nodes: [{
data: {
id: 'n0'
}
},
{
data: {
id: 'n1'
}
},
{
data: {
id: 'n2'
}
},
{
data: {
id: 'n3'
}
},
{
data: {
id: 'n4'
}
},
{
data: {
id: 'n5'
}
},
{
data: {
id: 'n6'
}
},
{
data: {
id: 'n7'
}
},
{
data: {
id: 'n8'
}
},
{
data: {
id: 'n9'
}
},
{
data: {
id: 'n10'
}
},
{
data: {
id: 'n11'
}
},
{
data: {
id: 'n12'
}
},
{
data: {
id: 'n13'
}
},
{
data: {
id: 'n14'
}
},
{
data: {
id: 'n15'
}
},
{
data: {
id: 'n16'
}
}
],
edges: [{
data: {
source: 'n0',
target: 'n1'
}
},
{
data: {
source: 'n1',
target: 'n2'
}
},
{
data: {
source: 'n1',
target: 'n3'
}
},
{
data: {
source: 'n2',
target: 'n7'
}
},
{
data: {
source: 'n2',
target: 'n11'
}
},
{
data: {
source: 'n2',
target: 'n16'
}
},
{
data: {
source: 'n3',
target: 'n4'
}
},
{
data: {
source: 'n3',
target: 'n16'
}
},
{
data: {
source: 'n4',
target: 'n5'
}
},
{
data: {
source: 'n4',
target: 'n6'
}
},
{
data: {
source: 'n6',
target: 'n8'
}
},
{
data: {
source: 'n8',
target: 'n9'
}
},
{
data: {
source: 'n8',
target: 'n10'
}
},
{
data: {
source: 'n11',
target: 'n12'
}
},
{
data: {
source: 'n12',
target: 'n13'
}
},
{
data: {
source: 'n13',
target: 'n14'
}
},
{
data: {
source: 'n13',
target: 'n15'
}
},
]
},
layout: {
name: 'dagre',
padding: 5
}
});
cy.on('click', 'node', function(event) {
// get node a
let node_a = event.target;
// get edges to -> b and c
let connected_edges = node_a.connectedEdges()
// get source and target nodes -> a, b and c
let connected_nodes = connected_edges.connectedNodes()
// get target nodes -> b and c
let target_nodes = connected_edges.targets()
// Then you can remove the unwanted nodes
// If you want, you can save removed_nodes to local storage and add them to the grap at a later point
let removed_nodes = cy.remove(cy.nodes().not(connected_nodes))
// You can run the layout directly on the new graph
cy.layout({
name: 'dagre',
padding: 5
}).run()
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
left: 0;
top: 0;
float: left;
position: absolute;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://unpkg.com/jquery#3.3.1/dist/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js">
</script>
<!-- cyposcape dagre -->
<script src="https://unpkg.com/dagre#0.7.4/dist/dagre.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
<!-- cytoscape popper -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.5/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-popper#1.0.2/cytoscape-popper.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>

Cystoscape is out of canvas border

I'm traying to contain the objects inside of cytoscape canvas without moving outside of max width and height, but if i drag the objects inside of canvas , they go outside of canvas border:
Actually i'm not using the canvas from HTML5, instead im using the canvas from cytoscape.js plugin so this makes more complicated to fix it.
I already saw cystoscape documentation to see if there are any kind of option to make the borders fixed and make the content inside resposive,but didnt found anything.
I would like to kow if there any way to trick this.
my code test:
cystoscape box test
``
$(document).ready(function () {
// document.addEventListener('DOMContentLoaded', function() {
$('#cyto').attr("title", "try clicking and dragging around the canvas and nodes");
tippy('#cyto')
cy = cytoscape({
container: document.getElementById('cyto'),
style: cytoscape.stylesheet()
// style for the nodes
.selector('node')
.css({
'width': 70,
'height': 70,
'content': 'data(id)',
'text-align': 'center',
'color': '#506874',
'background-color': '#20b2aa',
'font-family': 'Oswald',
'shape': 'roundrectangle',
'font-size': 20
})
// style for the connecting lines
.selector('edge')
.css({
'width': .9,
'height': 0.2,
'curve-style': 'bezier',
'target-arrow-shape': 'triangle',
'target-arrow-color': '#F3A712',
'line-color': '#F3A712',
// 'line-color': '#C40E0E',
})
.selector(':selected')
.css({
'background-color': '#428bca',
'line-color': '#C40E0E',
'target-arrow-color': '#C40E0E',
'source-arrow-color': '#C40E0E'
})
.selector('.faded')
.css({
'opacity': 1,
'text-opacity': 0
}),
elements: [
{
group: 'nodes',
data: {
id: 'WORDS'
}
}, {
group: 'nodes',
data: {
id: 'REALITY'
}
},
{
group: 'nodes',
data: {
id: 'THE WORLD'
}
},
{
group: 'nodes',
data: {
id: 'PEOPLE'
}
},
{
group: 'nodes',
data: {
id: 'ME'
}
},
{
group: 'edges',
data: {
id: 'edge1',
source: 'PEOPLE',
target: 'WORDS'
}
},
{
group: 'edges',
data: {
id: 'edge2',
source: 'PEOPLE',
target: 'REALITY'
}
},
{
group: 'edges',
data: {
id: 'edge3',
source: 'ME',
target: 'WORDS'
}
},
{
group: 'edges',
data: {
id: 'edge4',
source: 'WORDS',
target: 'THE WORLD'
}
},
{
group: 'edges',
data: {
id: 'edge',
source: 'THE WORLD',
target: 'ME'
}
},
{
group: 'edges',
data: {
id: 'edge6',
source: 'PEOPLE',
target: 'THE WORLD'
}
},
{
group: 'edges',
data: {
id: 'edge7',
source: 'ME',
target: 'THE WORLD'
}
},
{
group: 'edges',
data: {
id: 'edge9',
source: 'WORDS',
target: 'REALITY'
}
},
{
group: 'edges',
data: {
id: 'edge5',
source: 'REALITY',
target: 'ME'
}
}
],
}); // end cytoscape
}, false);
``
Just like with any canvas object, you need to "listen" to the drag event and take action based on the position.
The code below is a push in the right direction, I'm just showing the position of the element as it is dragged, next you need to set your area boundaries and prevent the element from moving outside
tippy("#cyto");
cy = cytoscape({
container: document.getElementById("cyto"),
style: cytoscape
.stylesheet()
.selector("node")
.css({content: "data(id)"}),
elements: [
{data: { id: "WORDS" }},
{data: { id: "REALITY" }}
]
});
cy.on('drag', 'node', function (evt) {
var node = evt.target;
var point = node.point();
console.log(node.id() + " " + point.x + " " + point.y);
if (point.y < 10)
node.style({ 'background-color': 'red' });
else
node.style({ 'background-color': 'blue' });
});
.container {
display: grid;
border: 2px blue solid;
height: 160px;
width: 400px;
}
#cyto {
grid-row: 2/ span 1;
grid-column: 1/ span 6;
}
<script src="https://unpkg.com/tippy.js#2.0.8/dist/tippy.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.14.1/cytoscape.min.js"></script>
<div class="container">
<div id="cyto">
</div>
</div>
You could use the https://github.com/cytoscape/cytoscape.js-automove but I strongly recommend you to understand this clearly before you start using extensions

Removing edge found in DFS algorithm cytoscape JS

Today I'm started with cytoscape and trying to make DFS search on prepared graph. I want to remove every edge that algorithm will go thought.
var dfs = cy.elements().dfs('#0', function(v, e, u, i, depth){}, false);
var highlightNextEle = function(){
if( i < dfs.path.length ){
dfs.path[i+1].remove();
i++;
setTimeout(highlightNextEle, 1000);
}
};
highlightNextEle();
I tried this code and he remove first edge but then he removes everything connected with started node.
For any tips, thank you in advance
if you want to remove the edges found in dfs, you can use the handler function inside dfs like this:
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
style: [{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center',
'height': '60px',
'width': '60px',
'border-color': 'black',
'border-opacity': '1',
'border-width': '10px'
}
},
{
selector: '$node > node',
css: {
'padding-top': '10px',
'padding-left': '10px',
'padding-bottom': '10px',
'padding-right': '10px',
'text-valign': 'top',
'text-halign': 'center',
'background-color': '#bbb'
}
},
{
selector: 'edge',
css: {
'target-arrow-shape': 'triangle'
}
},
{
selector: ':selected',
css: {
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
}
}
],
elements: {
nodes: [{
data: {
id: 'n0'
}
},
{
data: {
id: 'n1'
}
},
{
data: {
id: 'n2'
}
},
{
data: {
id: 'n3'
}
},
{
data: {
id: 'n4'
}
},
{
data: {
id: 'n5'
}
},
{
data: {
id: 'n6'
}
},
{
data: {
id: 'n7'
}
},
{
data: {
id: 'n8'
}
},
{
data: {
id: 'n9'
}
},
{
data: {
id: 'n10'
}
},
{
data: {
id: 'n11'
}
},
{
data: {
id: 'n12'
}
},
{
data: {
id: 'n13'
}
},
{
data: {
id: 'n14'
}
},
{
data: {
id: 'n15'
}
},
{
data: {
id: 'n16'
}
}
],
edges: [{
data: {
source: 'n0',
target: 'n1'
}
},
{
data: {
source: 'n1',
target: 'n2'
}
},
{
data: {
source: 'n1',
target: 'n3'
}
},
{
data: {
source: 'n2',
target: 'n7'
}
},
{
data: {
source: 'n2',
target: 'n11'
}
},
{
data: {
source: 'n2',
target: 'n16'
}
},
{
data: {
source: 'n3',
target: 'n4'
}
},
{
data: {
source: 'n3',
target: 'n16'
}
},
{
data: {
source: 'n4',
target: 'n5'
}
},
{
data: {
source: 'n4',
target: 'n6'
}
},
{
data: {
source: 'n6',
target: 'n8'
}
},
{
data: {
source: 'n8',
target: 'n9'
}
},
{
data: {
source: 'n8',
target: 'n10'
}
},
{
data: {
source: 'n11',
target: 'n12'
}
},
{
data: {
source: 'n12',
target: 'n13'
}
},
{
data: {
source: 'n13',
target: 'n14'
}
},
{
data: {
source: 'n13',
target: 'n15'
}
},
]
},
layout: {
name: 'dagre',
padding: 5
}
});
cy.unbind('click');
cy.bind('click', 'node', function(evt) {
var edges = cy.collection();
var dfs = cy.elements().dfs({
roots: `#${evt.target.id()}`,
visit: function(v, e, u, i, depth) {
console.log('visit ' + v.id());
if (e) edges = edges.add(e);
},
directed: false
});
console.log(dfs);
cy.remove(edges);
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
left: 0;
top: 0;
float: left;
position: absolute;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://unpkg.com/cytoscape#3.3.0/dist/cytoscape.min.js">
</script>
<script src="https://unpkg.com/jquery#3.3.1/dist/jquery.js"></script>
<!-- cyposcape dagre -->
<script src="https://unpkg.com/dagre#0.7.4/dist/dagre.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>

How to highlight the path between two nodes in CYTOSCAPE JS

i can create a graph using cytoscape js library . i am following the this tutorial and i implement like this.
CODE:
$(function(){ // on dom ready
$('#cy').cytoscape({
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(id)'
})
.selector('edge')
.css({
'target-arrow-shape': 'triangle',
'width': 4,
'line-color': '#ddd',
'target-arrow-color': '#ddd'
})
.selector('.highlighted')
.css({
'background-color': '#61bffc',
'line-color': '#61bffc',
'target-arrow-color': '#61bffc',
'transition-property': 'background-color, line-color, target-arrow-color',
'transition-duration': '0.5s'
}),
elements: {
nodes: [
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{ data: { id: 'c' } },
{ data: { id: 'd' } },
{ data: { id: 'e' } },
{ data: { id: 'f' } },
{ data: { id: 'g' } }
],
edges: [
{ data: { id: 'ab', weight: 1, source: 'a', target: 'b' } },
{ data: { id: 'ac', weight: 2, source: 'a', target: 'c' } },
{ data: { id: 'bd', weight: 3, source: 'b', target: 'd' } },
{ data: { id: 'be', weight: 4, source: 'b', target: 'e' } },
{ data: { id: 'cf', weight: 5, source: 'c', target: 'f' } },
{ data: { id: 'cg', weight: 6, source: 'c', target: 'g' } }
]
},
layout: {
name: 'breadthfirst',
directed: true,
roots: '#a',
padding: 5
},
ready: function(){
window.cy = this;
var bfs = cy.elements().bfs('#a', function(){}, true);
var i = 0;
var highlightNextEle = function(){
bfs.path[i].addClass('highlighted');
if( i < bfs.path.length ){
i++;
setTimeout(highlightNextEle, 1000);
}
};
// kick off first highlight
highlightNextEle();
}
});
}); // on dom ready
on my implementation i need to highlight the path between the nodes d and g.
How to find the path between the nodes and highlight them?
Using dijkstra algorithm method we can find the path between the nodes.
var dijkstra = cy.elements().dijkstra('#e',function(){
return this.data('weight');
},false);
var bfs = dijkstra.pathTo( cy.$('#i') );
Complete CODE :
$(function(){ // on dom ready
$('#cy').cytoscape({
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(id)'
})
.selector('edge')
.css({
'target-arrow-shape': 'triangle',
'width': 4,
'line-color': '#ddd',
'target-arrow-color': '#ddd'
})
.selector('.highlighted')
.css({
'background-color': '#61bffc',
'line-color': '#61bffc',
'target-arrow-color': '#61bffc',
'transition-property': 'background-color, line-color, target-arrow-color',
'transition-duration': '0.5s'
}),
elements: {
nodes: [
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{ data: { id: 'c' } },
{ data: { id: 'd' } },
{ data: { id: 'e' } },
{ data: { id: 'f' } },
{ data: { id: 'g' } },
{ data: { id: 'h' } },
{ data: { id: 'i' } }
],
edges: [
{ data: { id: 'ab', weight: 1, source: 'a', target: 'b' } },
{ data: { id: 'ac', weight: 2, source: 'a', target: 'c' } },
{ data: { id: 'bd', weight: 3, source: 'b', target: 'd' } },
{ data: { id: 'be', weight: 4, source: 'b', target: 'e' } },
{ data: { id: 'cf', weight: 5, source: 'c', target: 'f' } },
{ data: { id: 'cg', weight: 6, source: 'c', target: 'g' } },
{ data: { id: 'ah', weight: 7, source: 'a', target: 'h' } },
{ data: { id: 'hi', weight: 8, source: 'h', target: 'i' } }
]
},
layout: {
name: 'breadthfirst',
directed: true,
roots: '#a',
padding: 5
},
ready: function(){
window.cy = this;
var dijkstra = cy.elements().dijkstra('#e',function(){
return this.data('weight');
},false);
var bfs = dijkstra.pathTo( cy.$('#i') );
var x=0;
var highlightNextEle = function(){
var el=bfs[x];
el.addClass('highlighted');
if(x<bfs.length){
x++;
setTimeout(highlightNextEle, 500);
}
};
highlightNextEle();
}
});
}); // on dom ready
I you want to highlight all the possible paths
event.target- is the starting node
event.target.successors().animate({
style: { lineColor: 'red' }
});
Assuming you have picked two nodes and stored them in source_node and target_node, and you want to label everything in between with class 'path_element':
p = cy.elements().aStar({root: source_node, goal: target_node, directed: true}).path;
if (p) {
p.filter(function(i,x) { return x != source_node && x != target_node; })
.addClass('path_element');
p.edgesWith(p)
.addClass('path_element');
}

Categories