How do you create taxi edges between parent nodes?Node and edge outline?Export selected node and edge in cytoscape.jsHow to interactively create an edge on canvas between two nodesAvoid edge-node overlapping in cytoscape.jsCustom node renderer for Cytoscape + restrict drag pointsCystoscape displaying images instead of nodesNode's background image is clipped when using bordercytoscape.js show selected nodes and edges in new graph on right-clickcytoscape : how to disable node and edge selection?graph representation tool for huge data with specific features
Generic method to call API functions with simple retrial on errors
Don't look at what I did there
Is "survival" paracord with fire starter strand dangerous
How can I reply to coworkers who accuse me of automating people out of work?
What caused the end of cybernetic implants?
Why is 3/4 a simple meter while 6/8 is a compound meter?
Convert shapefille to KML
Can I lend a small amount of my own money to a bank at the federal funds rate?
Heat output from a 200W electric radiator?
Why did the population of Bhutan drop by 70% between 2007 and 2008?
Fixing a blind bolt hole when the first 2-3 threads are ruined?
What checks exist against overuse of presidential pardons in the USA?
What control character is ^ in the buffer in a file open in vim?
Why didn't Doc believe Marty was from the future?
Where should I draw the line on follow up questions from previous employer
Create a list of snaking numbers under 50,000
Why did Starhopper's exhaust plume become brighter just before landing?
Which polygons can be turned inside out by a smooth deformation?
Idiomatic way to create an immutable and efficient class in C++?
Does Dovescape counter Enchantment Creatures?
Inspiration for failed idea?
How to save money by shopping at a variety of grocery stores?
How to differentiate between two people with the same name in a story?
What is this "opened" cube called?
How do you create taxi edges between parent nodes?
Node and edge outline?Export selected node and edge in cytoscape.jsHow to interactively create an edge on canvas between two nodesAvoid edge-node overlapping in cytoscape.jsCustom node renderer for Cytoscape + restrict drag pointsCystoscape displaying images instead of nodesNode's background image is clipped when using bordercytoscape.js show selected nodes and edges in new graph on right-clickcytoscape : how to disable node and edge selection?graph representation tool for huge data with specific features
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
1
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 readybody
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?
cytoscape.js
edited Mar 28 at 7:34
Stephan T.
1,6771 gold badge9 silver badges21 bronze badges
asked Mar 27 at 22:18
Assaf WeinbergAssaf Weinberg
1131 gold badge1 silver badge6 bronze badges
add a comment |
1
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 readybody
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?
cytoscape.js
edited Mar 28 at 7:34
Stephan T.
1,6771 gold badge9 silver badges21 bronze badges
asked Mar 27 at 22:18
Assaf WeinbergAssaf Weinberg
1131 gold badge1 silver badge6 bronze badges
Thanks for providing code, please post that code in future questions directly in your post and not as a link. That way, the link will expire one day but the question can still be answered/viewed. Thx
– Stephan T.
Mar 28 at 7:08
add a comment |
1
1
1
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 readybody
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?
cytoscape.js
edited Mar 28 at 7:34
Stephan T.
1,6771 gold badge9 silver badges21 bronze badges
asked Mar 27 at 22:18
Assaf WeinbergAssaf Weinberg
1131 gold badge1 silver badge6 bronze badges
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 readybody
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?
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 readybody
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>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 readybody
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>cytoscape.js
cytoscape.js
edited Mar 28 at 7:34
Stephan T.
1,6771 gold badge9 silver badges21 bronze badges
asked Mar 27 at 22:18
Assaf WeinbergAssaf Weinberg
1131 gold badge1 silver badge6 bronze badges
edited Mar 28 at 7:34
Stephan T.
1,6771 gold badge9 silver badges21 bronze badges
asked Mar 27 at 22:18
Assaf WeinbergAssaf Weinberg
1131 gold badge1 silver badge6 bronze badges
edited Mar 28 at 7:34
Stephan T.
1,6771 gold badge9 silver badges21 bronze badges
edited Mar 28 at 7:34
Stephan T.
1,6771 gold badge9 silver badges21 bronze badges
edited Mar 28 at 7:34
Stephan T.
1,6771 gold badge9 silver badges21 bronze badges
1,6771 gold badge9 silver badges21 bronze badges
asked Mar 27 at 22:18
Assaf WeinbergAssaf Weinberg
1131 gold badge1 silver badge6 bronze badges
asked Mar 27 at 22:18
Assaf WeinbergAssaf Weinberg
1131 gold badge1 silver badge6 bronze badges
asked Mar 27 at 22:18
Assaf WeinbergAssaf Weinberg
1131 gold badge1 silver badge6 bronze badges
1131 gold badge1 silver badge6 bronze badges
Thanks for providing code, please post that code in future questions directly in your post and not as a link. That way, the link will expire one day but the question can still be answered/viewed. Thx
– Stephan T.
Mar 28 at 7:08
add a comment |
Thanks for providing code, please post that code in future questions directly in your post and not as a link. That way, the link will expire one day but the question can still be answered/viewed. Thx
– Stephan T.
Mar 28 at 7:08
Thanks for providing code, please post that code in future questions directly in your post and not as a link. That way, the link will expire one day but the question can still be answered/viewed. Thx
– Stephan T.
Mar 28 at 7:08
Thanks for providing code, please post that code in future questions directly in your post and not as a link. That way, the link will expire one day but the question can still be answered/viewed. Thx
– Stephan T.
Mar 28 at 7:08
add a comment |
2 Answers
2
active
oldest
votes
0
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 readybody
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.
answered Mar 28 at 7:06
Stephan T.Stephan T.
1,6771 gold badge9 silver badges21 bronze badges
1
Thanks for the answer. It seems to work at first, but then reverts to the broken behavior if you select an edge. This problem happens across all layouts, not just breadthFirst. Taxi edges are pretty new so might be fixable. I've filed a bug report on github.
– Assaf Weinberg
Mar 28 at 20:31
add a comment |
0
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'
answered Mar 29 at 15:36
Assaf WeinbergAssaf Weinberg
1131 gold badge1 silver badge6 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55387331%2fhow-do-you-create-taxi-edges-between-parent-nodes%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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 readybody
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.
answered Mar 28 at 7:06
Stephan T.Stephan T.
1,6771 gold badge9 silver badges21 bronze badges
1
Thanks for the answer. It seems to work at first, but then reverts to the broken behavior if you select an edge. This problem happens across all layouts, not just breadthFirst. Taxi edges are pretty new so might be fixable. I've filed a bug report on github.
– Assaf Weinberg
Mar 28 at 20:31
add a comment |
0
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 readybody
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.
answered Mar 28 at 7:06
Stephan T.Stephan T.
1,6771 gold badge9 silver badges21 bronze badges
1
Thanks for the answer. It seems to work at first, but then reverts to the broken behavior if you select an edge. This problem happens across all layouts, not just breadthFirst. Taxi edges are pretty new so might be fixable. I've filed a bug report on github.
– Assaf Weinberg
Mar 28 at 20:31
add a comment |
0
0
0
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 readybody
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.
answered Mar 28 at 7:06
Stephan T.Stephan T.
1,6771 gold badge9 silver badges21 bronze badges
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 readybody
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.
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 readybody
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>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 readybody
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>answered Mar 28 at 7:06
Stephan T.Stephan T.
1,6771 gold badge9 silver badges21 bronze badges
answered Mar 28 at 7:06
Stephan T.Stephan T.
1,6771 gold badge9 silver badges21 bronze badges
answered Mar 28 at 7:06
Stephan T.Stephan T.
1,6771 gold badge9 silver badges21 bronze badges
answered Mar 28 at 7:06
Stephan T.Stephan T.
1,6771 gold badge9 silver badges21 bronze badges
1,6771 gold badge9 silver badges21 bronze badges
1
Thanks for the answer. It seems to work at first, but then reverts to the broken behavior if you select an edge. This problem happens across all layouts, not just breadthFirst. Taxi edges are pretty new so might be fixable. I've filed a bug report on github.
– Assaf Weinberg
Mar 28 at 20:31
add a comment |
1
Thanks for the answer. It seems to work at first, but then reverts to the broken behavior if you select an edge. This problem happens across all layouts, not just breadthFirst. Taxi edges are pretty new so might be fixable. I've filed a bug report on github.
– Assaf Weinberg
Mar 28 at 20:31
1
1
Thanks for the answer. It seems to work at first, but then reverts to the broken behavior if you select an edge. This problem happens across all layouts, not just breadthFirst. Taxi edges are pretty new so might be fixable. I've filed a bug report on github.
– Assaf Weinberg
Mar 28 at 20:31
Thanks for the answer. It seems to work at first, but then reverts to the broken behavior if you select an edge. This problem happens across all layouts, not just breadthFirst. Taxi edges are pretty new so might be fixable. I've filed a bug report on github.
– Assaf Weinberg
Mar 28 at 20:31
add a comment |
0
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'
answered Mar 29 at 15:36
Assaf WeinbergAssaf Weinberg
1131 gold badge1 silver badge6 bronze badges
add a comment |
0
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'
answered Mar 29 at 15:36
Assaf WeinbergAssaf Weinberg
1131 gold badge1 silver badge6 bronze badges
add a comment |
0
0
0
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'
answered Mar 29 at 15:36
Assaf WeinbergAssaf Weinberg
1131 gold badge1 silver badge6 bronze badges
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'
answered Mar 29 at 15:36
Assaf WeinbergAssaf Weinberg
1131 gold badge1 silver badge6 bronze badges
edited Mar 29 at 15:44
answered Mar 29 at 15:36
Assaf WeinbergAssaf Weinberg
1131 gold badge1 silver badge6 bronze badges
answered Mar 29 at 15:36
Assaf WeinbergAssaf Weinberg
1131 gold badge1 silver badge6 bronze badges
answered Mar 29 at 15:36
Assaf WeinbergAssaf Weinberg
1131 gold badge1 silver badge6 bronze badges
1131 gold badge1 silver badge6 bronze badges
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55387331%2fhow-do-you-create-taxi-edges-between-parent-nodes%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Thanks for providing code, please post that code in future questions directly in your post and not as a link. That way, the link will expire one day but the question can still be answered/viewed. Thx
– Stephan T.
Mar 28 at 7:08