I want to create a tree with different branch lengths, looking like this:
Is there a possibility of assigning a length to the secondary axis of taxi trees? I tried to assigning a weight to a branch, but every branch has the same length in the x-asis.
In the following you can see my code, maybe you see an error or can help me with this problem. Thank you!
window.addEventListener("DOMContentLoaded", function() {
var toJson = function(res){ return res.Json(); };
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
// demo your layout
layout: {
name: "dagre",
rankDir: 'LR'
// some more options here...
},
style: [{
selector: "node",
style: {
//"background-color": "#dd4de2",
'background-color': '#9dbaea',
'border-color': 'white',
'border-style': 'solid',
'border-width': 0.3,
'text-valign': 'center',
'text-halign': 'right',
'height': 5,
'width': 5,
'font-size': 3,
}
},
{
selector: ".leaf",
style: {
"background-color": "red",
'content': 'data(id)',
'font-size': 6,
'height': 5,
'width': 5,
}
},
{
selector: ".root",
style: {
"background-color": "#9dbaea",
'font-size': 4,
'content': "root",
'height': 5,
'width': 5,
}
},
{
selector: "edge",
style: {
'width': 1,
'length': 'data(weight)',
//'target-arrow-shape': 'vee',
'line-color': 'black',
//'target-arrow-color': '#9dbaea',
'curve-style': 'taxi',
//needs to be updated depending no edgeweight
'taxi-turn': '100px',
'taxi-direction': 'vertical',
'edge-distances': 'node-position',
opacity: 0.7
}
}
],
elements: {
nodes: [
{ data: { id: 'inner_n0', type: 'taxi' } },
{ data: { id: 'inner_n1', type: 'taxi' } },
{ data: { id: 'inner_n2', type: 'taxi' } },
{ data: { id: 'inner_n3', type: 'taxi' } },
{ data: { id: 'cell1' } },
{ data: { id: 'cell2' } },
{ data: { id: 'cell3' } },
{ data: { id: 'cell4' } },
{ data: { id: 'cell5' } },
],
edges: [
{ data: { source: 'inner_n0', weight:'10', target: 'inner_n1' }, "classes": 'taxi' },
{ data: { source: 'inner_n0', weight:'10', target: 'inner_n3' }, "classes": 'taxi' },
{ data: { source: 'inner_n1', weight:'10', target: 'inner_n2' }, "classes": 'taxi' },
{ data: { source: 'inner_n1', weight:'10', target: 'cell2' }, "classes": 'taxi' },
{ data: { source: 'inner_n2', weight:'5', target: 'cell3' }, "classes": 'taxi' },
{ data: { source: 'inner_n3', weight:'5', target: 'cell1' }, "classes": 'taxi' },
{ data: { source: 'inner_n3', weight:'20', target: 'cell5' }, "classes": 'taxi' },
{ data: { source: 'inner_n2', weight:'10', target: 'cell4' }, "classes": 'taxi' }
]
}
//elements: fetch('input.json').then(toJson),
}));
cy.nodes().leaves().addClass("leaf");
cy.nodes().roots().addClass("root");
});
<!doctype html>
<html>
<head>
<title>phylogenetic tree</title>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/browse/[email protected] /cdn-cgi/l/email-protection/dist/dagre.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/cytoscape-klay.min.js"></script>
<style>
body {
font-family: helvetica;
font-size: 14px;
}
#cy {
width: 950px;
height: 650px;
border-style: double;
border-color: coral;
position: absolute;
display: block;
left: 0;
top: 0;
z-index: 999;
}
h1 {
opacity: 0.5;
font-size: 1em;
}
</style>
<script src="code.js"></script>
</head>
<body>
<h1>cytoscape-dagre demo</h1>
<div id="cy"></div>
</body>
</html>
None