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 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?






cytoscape.js







share|improve this question


























  • 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

















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 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?






cytoscape.js







share|improve this question


























  • 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













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 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?






cytoscape.js







share|improve this question
















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?






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>





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>





cytoscape.js




cytoscape.js






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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




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

















  • 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












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 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.






share|improve this answer




















  • 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


















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'





share|improve this answer





























    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


















    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 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.






    share|improve this answer




















    • 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















    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 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.






    share|improve this answer




















    • 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













    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 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.






    share|improve this answer













    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.






    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>





    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>






    share|improve this answer












    share|improve this answer



    share|improve this answer










    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












    • 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













    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'





    share|improve this answer































      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'





      share|improve this answer





























        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'





        share|improve this answer















        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'






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Mar 29 at 15:44

























        answered Mar 29 at 15:36









        Assaf WeinbergAssaf Weinberg

        1131 gold badge1 silver badge6 bronze badges




        1131 gold badge1 silver badge6 bronze badges






























            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














            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





















































            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







            -

            Popular posts from this blog

            Obelisk of Theodosius Contents History Description Notes Bibliography Further reading External links Navigation menuAge of spirituality : late antique and early Christian art, third to seventh centuryOver 60 picturesObelisks of the World41°00′21.24″N 28°58′31.43″E / 41.0059000°N 28.9753972°E / 41.0059000; 28.97539727724550-7235741376235741376

            Image
            Obelisks in IstanbulAncient Egyptian obelisksRelocated ancient Egyptian monumentsLatin inscriptionsByzantine Greek inscriptionsVictory monumentsHippodrome of Constantinople4th-century Roman sculptures15th-century BC stelesThutmose III TurkishAncient EgyptianobeliskPharaohThutmose IIIHippodromeConstantinopleIstanbulTurkeyRoman emperorTheodosius I18th dynastyThutmose IIIpylontemple of KarnakConstantius IIriver NileAlexandriaCircus MaximusRomeLateran ObeliskTheodosius IAswanLateran Obeliskvictory over the MitanniCorinthianwater organCtesibiusporphyryhexameterselegiaccoupletsByzantine Greek Obelisk of Theodosius From Wikipedia, the free encyclopedia Jump to navigation Jump to search The obelisk of Theodosius I in Istanbul. The Obelisk of Theodosius (Turkish: Dikilitaş ) is the Ancient Egyptian obelisk of Pharaoh Thutmose III re-erected in the Hippodrome of Constantinople (known today as At Meydanı or Sultanahmet Meydanı , in the modern...
            Read more

            밀양 대씨 역사 각주 함께 보기 둘러보기 메뉴밀양 대씨

            Image
            대씨밀양 대씨발해의 왕족발해 한국의 성씨발해대중상고구려대조영고구려발해발해요(遼)나라대광현대인선 밀양 대씨 위키백과, 우리 모두의 백과사전. 둘러보기로 가기 검색하러 가기 밀양 대씨(密陽 大氏) 관향 경상남도 밀양시 시조 대조영(大祚榮) 주요 중시조 대덕세 (大德歲) 인구 (2000...
            Read more

            1973년 목차 사건 문화 탄생 사망 노벨상 달력 둘러보기 메뉴

            Image
            1973년 월요일로 시작하는 평년 1973년 위키백과, 우리 모두의 백과사전. 둘러보기로 가기 검색하러 가기 해 1970년 1971년 1972년 - 1973년 - 1974년 1975년 1976년 연대 1950년대 1960년대 - 1970년대 - 1980년대 1990년대 세기 18세기 19세기 - 20세기 - 21세기 22세기 서기 1973년의 다른 기년법 간지 임자년~계축년 단기 4306년 그레고리력 1973년 MCMLXXIII 불기 2517년 이...
            Read more