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

            Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

            Image
            Pages using ISBN magic linksMbegu za lughaKamusiIsimu nenoKiarabukitabulughaKiswahilialfabetimaanaufafanuzimanenomuhtasarisarufividahizoalfabeti Kamusi Kutoka Wikipedia, kamusi elezo huru Jump to navigation Jump to search Kamusi za Kiswahili Kamusi ya Kiswahili-Kiswahili (kamusi wahidiya) Kamusi ya Kiswahili - Kiingereza (kamusi thania) Kamusi (kutoka neno la Kiarabu قاموس qamus ) ni kitabu ambacho kinaorodhesha maneno ya lugha yaliyokusanywa kutoka kwa watumiaji wa lugha fulani, kwa mfano lugha ya Kiswahili. Maneno hupangwa kwa mtindo wa alfabeti, hutoa maana, asili na ufafanuzi wa utumizi wa maneno na jinsi yanavyotumika au yanavyotamkwa. [1] Yaliyomo 1 Aina za kamusi 2 Muundo wa kamusi 2.1 1. Utangulizi wa kamusi 2.2 2. Matini ya kamusi 2.3 3. Sherehe ya kamusi 3 Faida za kamusi 4 Dhima ya picha katika kamusi 5 Marejeo 6 Tazama pia 7 Viungo vya nje Aina za kamusi | Kuna aina mbalimbali za kamusi ambazo n...
            Read more

            SQL error code 1064 with creating Laravel foreign keysForeign key constraints: When to use ON UPDATE and ON DELETEDropping column with foreign key Laravel error: General error: 1025 Error on renameLaravel SQL Can't create tableLaravel Migration foreign key errorLaravel php artisan migrate:refresh giving a syntax errorSQLSTATE[42S01]: Base table or view already exists or Base table or view already exists: 1050 Tableerror in migrating laravel file to xampp serverSyntax error or access violation: 1064:syntax to use near 'unsigned not null, modelName varchar(191) not null, title varchar(191) not nLaravel cannot create new table field in mysqlLaravel 5.7:Last migration creates table but is not registered in the migration table

            Image
            Does a multiclassed wizard start with a spellbook? Minimizing medical costs with HSA Boss has banned cycling to work because he thinks it's unsafe Is there a typical layout to blocking installed for backing in new construction framing? In the Seventh Seal why does Death let the chess game happen? Why has Novell never written its own boot loader? Should I warn my boss I might take sick leave Why is the saxophone not common in classical repertoire? Is it possible to spoof an IP address to an exact number? Motorcyle Chain needs to be cleaned every time you lube it? Bypass with wrong cvv of debit card and getting OTP Do we have a much compact and generalized version of erase–remove idiom? how can i make this execution plan more efficient? Why did moving the mouse cursor cause Windows 95 to run more quickly? What's the big deal about the Nazgûl losing their horses? Has chattel slavery ever been used as a criminal punishment in the USA since the passag...
            Read more

            은진 송씨 목차 역사 본관 분파 인물 조선 왕실과의 인척 관계 집성촌 항렬자 인구 같이 보기 각주 둘러보기 메뉴은진 송씨세종실록 149권, 지리지 충청도 공주목 은진현

            Image
            송씨은진 송씨충청남도 소재 성씨논산시 충청남도논산시은진면한국의 성씨고려송명의회덕 황씨류준고흥 류씨송유조선송준길문묘송시열좌의정문묘종묘송준길송규렴송상기송시열송인수송환기송치규송근수충청남도논산시은진면백제757년충청남도은진군논산군논산시은진면송유 은...
            Read more