I initialized the cytoscape like this:
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{ data: { id: 'c' } },
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
},
{
data: {
id: 'ac',
source: 'a',
target: 'c'
}
}
]
});
Then I added a function which adds a new node whenever the user double clicks on the viewport.
var nid = 1;
document.getElementById("cy").ondblclick = function(e) {
cy.add({ data: { id: nid }, renderedPosition: { x: e.x, y: e.y } });
nid++;
};
Then I wrote this function which should be called whenever user clicks a node. It works whenever user clicks on a node which I added manually when initializing the cytoscape but the problem is its not working for the nodes which user added by double clicking.
cy.$('node').on('click', function (e) {
console.log('node clicked: ', e.target.id());
});
Any idea what am I doing wrong?
I have a working version of your code here:
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
boxSelectionEnabled: false,
autounselectify: true,
style: [{
selector: "node",
css: {
"label": "data(id)",
"text-valign": "center",
"text-halign": "center",
"background-color": "data(faveColor)"
}
},
{
selector: "edge",
css: {
"curve-style": "bezier",
"control-point-step-size": 40,
"target-arrow-shape": "triangle"
}
}
],
elements: {
nodes: [{
data: {
id: "a",
faveColor: "#2763c4"
}
},
{
data: {
id: "b",
faveColor: "#37a32d"
}
},
{
data: {
id: "c",
faveColor: "#37a32d"
}
}
],
edges: [{
data: {
source: "a",
target: "b"
}
},
{
data: {
source: "a",
target: "c"
}
}
]
},
layout: {
name: "dagre"
}
}));
cy.ready(function() {
cy.dblclick();
});
var nid = 0;
cy.bind('dblclick', function(evt) {
cy.add({
group: 'nodes',
data: {
id: nid,
faveColor: 'red'
},
position: {
x: evt.x,
y: evt.y
}
});
nid++;
});
cy.bind('click', 'node', function(evt) {
console.log('node clicked: ', evt.target.id());
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
float: right;
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>
<!-- 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>
<script src="https://unpkg.com/cytoscape-dblclick/dist/index.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
I used the cy.on()/cy.bind() method, that seems to work with newly added nodes :)
Related
Is it possible to show a root element and its neighbors only without going deeper? I need this because I want that user expands the tree by clicking on nodes, while initially, the user can see only the first level.
I'm going to use cytoscape.js-view-utilities plugin for showing/hiding elements.
I know that there is neighborhood() method, but cannot figure out how to do this
As you said, you can do it by using view-utilities extension. First you should hide all nodes except the root and its neighbors. Then with a tap event on nodes, you can show neighbors of clicked node. In the below example, if you click on node n1 and n2, their neighbors are shown. If you want to differentiate nodes with hidden neighbors, you can assign them a new class and style, and define your tap event on that class.
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
layout: {name: 'breadthfirst', directed: true},
style: [{
selector: 'node',
css: {
'label': 'data(id)'
}
}
],
elements: {
nodes: [{
data: {
id: 'n0'
}
},
{
data: {
id: 'n1'
}
},
{
data: {
id: 'n2'
}
},
{
data: {
id: 'n3'
}
},
{
data: {
id: 'n4'
}
},
{
data: {
id: 'n5'
}
},
{
data: {
id: 'n6'
}
}
],
edges: [{
data: {
id: 'n0n1',
source: 'n0',
target: 'n1',
}
},
{
data: {
id: 'n0n2',
source: 'n0',
target: 'n2'
}
},
{
data: {
id: 'n1n3',
source: 'n1',
target: 'n3'
}
},
{
data: {
id: 'n1n4',
source: 'n1',
target: 'n4'
}
},
{
data: {
id: 'n2n5',
source: 'n2',
target: 'n5'
}
},
{
data: {
id: 'n2n6',
source: 'n2',
target: 'n6'
}
}
]
}
});
var instance = cy.viewUtilities();
instance.hide(cy.elements().difference(cy.getElementById('n0').closedNeighborhood()));
cy.on('tap', 'node', function(event){
instance.show(event.target.neighborhood());
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#button {
z-index = 1000;
}
#cy {
height: 95%;
width: 95%;
left: 0;
top: 50;
z-index = 900;
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/dist/cytoscape.min.js">
</script>
<script src="https://unpkg.com/cytoscape-view-utilities/cytoscape-view-utilities.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
Using cytoscape.js, I am setting the style of a node while defining it.
Shortened example below:
window.addEventListener('DOMContentLoaded', function(){
var cy = window.cy = cytoscape({
elements: {
nodes: [
{ data: { id: 'a', name: 'apple' }, style: { 'background-color': 'darkgreen' } },
]
}
});
});
(I have a default style for a node that is a different color)
This works fine, but when I run my code, the browser console shows the following warning:
Setting a `style` bypass at element creation is deprecated
What does it mean and what is the correct (non-deprecated) way to set it?
Thank you in advance!
The correct way of doing this would be to use the cytoscape stylesheet, as can be seen in every example in the docs:
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
boxSelectionEnabled: false,
autounselectify: true,
style: [{
selector: "node",
css: {
"label": "data(id)",
"text-valign": "center",
"text-halign": "center",
"background-color": "data(color)"
}
},
{
selector: "edge",
css: {
"line-fill": "radial-gradient",
"line-gradient-stop-colors": "red green blue",
"line-gradient-stop-positions": "25 50 75"
}
}
],
elements: {
nodes: [{
data: {
id: "a",
color: "#2763c4"
}
},
{
data: {
id: "b",
color: "#37a32d"
}
},
{
data: {
id: "c",
color: "#37a32d"
}
}
],
edges: [{
data: {
source: "a",
target: "b"
}
},
{
data: {
source: "a",
target: "c"
}
}
]
},
layout: {
name: "dagre"
}
}));
cy.ready(function() {
cy.dblclick();
});
var nid = 0;
cy.bind('dblclick', function(evt) {
console.log('dblclick');
cy.add({
group: 'nodes',
data: {
id: nid,
faveColor: 'red'
},
position: {
x: evt.x,
y: evt.y
}
});
nid++;
});
cy.bind('click', 'node', function(evt) {
console.log('node clicked: ', evt.target.id());
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
float: right;
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>
<!-- 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>
<script src="https://unpkg.com/cytoscape-dblclick/dist/index.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
I have a cytoscape.js model, where edges between nodes represent different relations.
I want to have possibility to display something like round shape or button in the middle of the edge, where user could click and get popup to change the relationship type.
So far I see in base package there is no option to display round shape.
I am using dagre layout, and this is my current edge configuration:
{
selector: "edge",
style: {
width: 1,
"font-size": "20px",
//opacity: "0.5",
label: "data(type)",
color: function(ele) {
return getEdgeColor(ele.data("type"));
},
"line-color": function(ele) {
return getEdgeColor(ele.data("type"));
},
"target-arrow-color": function(ele) {
return getEdgeColor(ele.data("type"));
},
"curve-style": "straight",
"target-arrow-shape": "triangle"
}
},
Could you recommend me any easy solution?
I have a workaround for this (the editation works on the whole edge, the dot is just for the looks:
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
style: [{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center',
'height': '60px',
'width': '60px'
}
},
{
selector: 'edge',
css: {
'font-size': "40px",
'label': "\u2022",
'curve-style': 'bezier',
'target-arrow-shape': 'data(arrow)'
}
}
],
elements: {
nodes: [{
data: {
id: 'n0'
}
},
{
data: {
id: 'n1'
}
},
{
data: {
id: 'n2'
}
},
{
data: {
id: 'n3'
}
}
],
edges: [{
data: {
source: 'n0',
target: 'n1',
arrow: 'triangle'
}
},
{
data: {
source: 'n1',
target: 'n2',
arrow: 'triangle'
}
},
{
data: {
source: 'n1',
target: 'n3',
arrow: 'triangle'
}
},
]
},
layout: {
name: 'concentric',
minNodeSpacing: 140,
}
});
cy.cxtmenu({
selector: 'edge',
menuRadius: 90,
commands: [{
content: 'Direction',
select: function(edge) {
edge.move({
source: edge.target().id(),
target: edge.source().id()
});
}
}]
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
left: 0;
top: 0;
float: left;
position: absolute;
}
.cxtmenu-disabled {
opacity: 0.333;
}
<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://cdn.jsdelivr.net/npm/cytoscape#3.10.1/dist/cytoscape.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-cxtmenu#3.1.1/cytoscape-cxtmenu.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
I use the ctx-menu extension here (right click on edge to open menu) and the dot is just an unicode character.
I'm trying to create an edge between two parent nodes using 'curve-style': 'taxi'. Unfortunately, edges between parent nodes don't seem to turn at right angles and generally route themselves very erratically.
window.addEventListener('DOMContentLoaded', function() { // on dom ready
// photos from flickr with creative commons license
var cy = cytoscape({
container: document.getElementById('cy'),
style: cytoscape.stylesheet()
.selector('node')
.style({
'height': 80,
'width': 80,
'background-fit': 'cover',
'border-color': '#000',
'border-width': 3,
'border-opacity': 0.5
})
.selector('.eating')
.style({
'border-color': 'red'
})
.selector('.eater')
.style({
'border-width': 9
})
.selector('edge')
.style({
'width': 6,
'target-arrow-shape': 'triangle',
'line-color': '#ffaaaa',
'target-arrow-color': '#ffaaaa',
'curve-style': 'taxi'
})
.selector('#bird')
.style({
'background-image': 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg'
})
.selector('#cat')
.style({
'background-image': 'https://farm2.staticflickr.com/1261/1413379559_412a540d29_b.jpg'
})
.selector('#ladybug')
.style({
'background-image': 'https://farm4.staticflickr.com/3063/2751740612_af11fb090b_b.jpg'
})
.selector('#aphid')
.style({
'background-image': 'https://farm9.staticflickr.com/8316/8003798443_32d01257c8_b.jpg'
})
.selector('#rose')
.style({
'background-image': 'https://farm6.staticflickr.com/5109/5817854163_eaccd688f5_b.jpg'
})
.selector('#grasshopper')
.style({
'background-image': 'https://farm7.staticflickr.com/6098/6224655456_f4c3c98589_b.jpg'
})
.selector('#plant')
.style({
'background-image': 'https://farm1.staticflickr.com/231/524893064_f49a4d1d10_z.jpg'
})
.selector('#wheat')
.style({
'background-image': 'https://farm3.staticflickr.com/2660/3715569167_7e978e8319_b.jpg'
}),
elements: {
nodes: [{
data: {
id: 'cat',
parent: 'bird'
}
},
{
data: {
id: 'bird'
}
},
{
data: {
id: 'ladybug'
}
},
{
data: {
id: 'aphid'
}
},
{
data: {
id: 'rose'
}
},
{
data: {
id: 'grasshopper'
}
},
{
data: {
id: 'plant'
}
},
{
data: {
id: 'wheat'
}
}
],
edges: [{
data: {
source: 'cat',
target: 'bird'
}
},
{
data: {
source: 'bird',
target: 'ladybug'
}
},
{
data: {
source: 'bird',
target: 'grasshopper'
}
},
{
data: {
source: 'grasshopper',
target: 'plant'
}
},
{
data: {
source: 'grasshopper',
target: 'wheat'
}
},
{
data: {
source: 'ladybug',
target: 'aphid'
}
},
{
data: {
source: 'aphid',
target: 'rose'
}
}
]
},
layout: {
name: 'breadthfirst',
directed: true
}
}); // cy init
}); // on dom ready
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" />
<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">
<title>Images</title>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
Is there a way to get taxi edges to behave the same way they do between non-parent nodes?
This is caused by a weired layout behaviour in the breadthfirst layout. When using compound nodes in breadthfirst, it seems that the layout can't handle inner nodes that well, so the outer edges are not really bfs edges (bonding together), but rather two seperate bfs edges (not bonding). In order to get the 'curve-style': 'taxi' to work, there is one simple but dumb way I think. Unfortunately, edges between parent nodes can't seem to turn at the right angles, so we have to make the bfs layout without the child nodes and add them afterwards (this is a stupid hack, but it works if you save all child nodes and add them afterwards:
window.addEventListener('DOMContentLoaded', function() { // on dom ready
// photos from flickr with creative commons license
var cy = cytoscape({
container: document.getElementById('cy'),
style: cytoscape.stylesheet()
.selector('node')
.style({
'height': 80,
'width': 80,
'background-fit': 'cover',
'border-color': '#000',
'border-width': 3,
'border-opacity': 0.5
})
.selector('.eating')
.style({
'border-color': 'red'
})
.selector('.eater')
.style({
'border-width': 9
})
.selector('edge')
.style({
"curve-style": "taxi",
"taxi-direction": "downward",
"taxi-turn": 20,
"taxi-turn-min-distance": 5
})
.selector('#bird')
.style({
'background-image': 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg'
})
.selector('#cat')
.style({
'background-image': 'https://farm2.staticflickr.com/1261/1413379559_412a540d29_b.jpg'
})
.selector('#ladybug')
.style({
'background-image': 'https://farm4.staticflickr.com/3063/2751740612_af11fb090b_b.jpg'
})
.selector('#aphid')
.style({
'background-image': 'https://farm9.staticflickr.com/8316/8003798443_32d01257c8_b.jpg'
})
.selector('#rose')
.style({
'background-image': 'https://farm6.staticflickr.com/5109/5817854163_eaccd688f5_b.jpg'
})
.selector('#grasshopper')
.style({
'background-image': 'https://farm7.staticflickr.com/6098/6224655456_f4c3c98589_b.jpg'
})
.selector('#plant')
.style({
'background-image': 'https://farm1.staticflickr.com/231/524893064_f49a4d1d10_z.jpg'
})
.selector('#wheat')
.style({
'background-image': 'https://farm3.staticflickr.com/2660/3715569167_7e978e8319_b.jpg'
}),
elements: {
nodes: [{
data: {
id: 'bird'
}
},
{
data: {
id: 'ladybug'
}
},
{
data: {
id: 'aphid'
}
},
{
data: {
id: 'rose'
}
},
{
data: {
id: 'grasshopper'
}
},
{
data: {
id: 'plant'
}
},
{
data: {
id: 'wheat'
}
}
],
edges: [{
data: {
source: 'bird',
target: 'ladybug'
}
},
{
data: {
source: 'bird',
target: 'grasshopper'
}
},
{
data: {
source: 'grasshopper',
target: 'plant'
}
},
{
data: {
source: 'grasshopper',
target: 'wheat'
}
},
{
data: {
source: 'ladybug',
target: 'aphid'
}
},
{
data: {
source: 'aphid',
target: 'rose'
}
}
]
},
layout: {
name: 'breadthfirst',
directed: true
}
}); // cy init
cy.ready(function() {
cy.ready(function() {
cy.add({
data: {
id: 'cat',
parent: 'bird'
}
});
});
});
}); // on dom ready
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" />
<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">
<title>Images</title>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
I added a couple of lines in the css section of cytoscape, also the cy.ready() part at the end of the js file.
I dug into the source code a bit and found that you can make this work as expected by setting the target-endpoint and source-endpoint edge style attributes to outside-to-node.
There's a bit of a funky behavior where the edge disappears when the parent nodes get too close. I found that setting 'edge-distances': 'node-position' and 'taxi-turn-min-distance': '0px' helped with that. Here is the full edge style for reference:
'curve-style': 'taxi',
'edge-distances': 'node-position',
'taxi-turn-min-distance': '0px',
'source-arrow-shape': 'triangle-backcurve',
'target-arrow-shape': 'triangle',
'target-endpoint': 'outside-to-node',
'source-endpoint': 'outside-to-node'
I first create a graph with 100's of connected nodes. After all the nodes have been added I call
cy.layout({name: "dagre"});
Next, I'm creating 5 or so additional connected nodes I call layout on the nodes added but it doesn't lay them out as expected. Instead of being more like a tree all the nodes are in a straight line.
It looks like this:
var collection = cy.collection();
collection.merge(eles);
...
// I merge in another 5 newly created nodes.
// Next I call layout
collection.layout({
name: "dagre", fit: false,
boundingBox: {
x1: mousex - width / 2, y1: mousey - height / 2, x2: mousex + width, y2: mousey + height
},
nodeSep: 30
}).run();
But I expect it to look like the image below.
In order to get it to look like the above, I call layout shown below.
cy.layout({name: "dagre"});
I've looked through all the options for a dagre layout and can't find anything to make it create the tree.
Edit: The dagre layout needs nodes and edges to calculate the right positions for the nodes, the way you use it, dagre thinks you give it 5 seperate nodes, which explains your wrong layout. The mistake lies here:
collection.merge(eles); // here you should add all relevant nodes and edges
End
I have an example for you --->here<---, just copy that and add your real data:
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: "100px",
shape: "rectangle",
"background-color": "data(faveColor)"
}
},
{
selector: "edge",
css: {
"curve-style": "bezier",
"control-point-step-size": 40,
"target-arrow-shape": "triangle"
}
}
],
elements: {
nodes: [
{ data: { id: "Top", faveColor: "#2763c4" } },
{ data: { id: "yes", faveColor: "#37a32d" } },
{ data: { id: "no", faveColor: "#2763c4" } },
{ data: { id: "Third", faveColor: "#2763c4" } },
{ data: { id: "Fourth", faveColor: "#56a9f7" } }
],
edges: [
{ data: { source: "Top", target: "yes" } },
{ data: { source: "Top", target: "no" } },
{ data: { source: "no", target: "Third" } },
{ data: { source: "Third", target: "Fourth" } },
{ data: { source: "Fourth", target: "Third" } }
]
},
layout: {
name: "random"
}
}));
cy.ready(function () {
setTimeout(function () {
cy.nodes().layout({ name: 'dagre' }).run(); // this is what you do!!
setTimeout(function () {
cy.elements().layout({ name: 'dagre' }).run(); // this is what you should do!!
},5000);
}, 5000);
});
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://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>
</head>
<body>
<div id="cy"></div>
</body>
</html>