I'm new to cytoscape.js And I met a problem about setting edge length of ploy by cytoscape.js. I know that extension cola.js can help with it.But I don't know how to pass parameters to cola.js setting options. My code is like this.
data.json:
{
"nodes" : [
{
"data": {"id": "a", "label": "TF", "size": "50px","tf":"bZIP"}
},
{
"data": {"id": "b", "label": "Gene2", "size":"5.447301098px", "tf":"bZIP"}
},
{
"data": {"id": "c", "label": "Gene3","size":"9.296750572px", "tf":"WRKY"}
},
{
"data": {"id": "d", "label": "Gene4","size": "1.173561939px", "tf":"MYB"}
},
{
"data": {"id": "e", "label": "Gene5", "size": "4.84237031px", "tf":"NAC"}
},
{
"data": {"id": "f", "label": "Gene6", "size": "1.492418527px","tf":"NA"}
}
],
"edges" : [
{
"data": {
"id": "ab",
"source": "a",
"target": "b",
"range":"3.4px"
}
},
{
"data": {
"id": "ac",
"source": "a",
"target": "c",
"range":"38.6px"
}
},
{
"data": {
"id": "ad",
"source": "a",
"target": "d",
"range":"20.6px"
}
},
{
"data": {
"id": "ae",
"source": "a",
"target": "e",
"range":"14.9px"
}
},
{
"data": {
"id": "af",
"source": "a",
"target": "f",
"range": "47.8px"
}
}]
}
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my</title>
<!-- <script src="src/cytoscape.min.js"></script> -->
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="../depend/jquery3.4/jquery.min.js"></script>
<!-- <script src="src/cola.min.js"></script> -->
<script src="https://unpkg.com/webcola/WebCola/cola.min.js"></script>
<script src="src/cytoscape-cola.js"></script>
</head>
<style>
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<body>
<div id="cy"></div>
<script>
$.ajax({
type:"get",
url:"data.json",
dataType:"json",
success:function(jsondata){
var cy = cytoscape({
container: document.getElementById('cy'),
elements: jsondata,
style: [
{
selector: 'node',
style: {
'label': 'data(label)',
'width': 'data(size)',
// 'height': 'data(size)',
'background-color': '#99CCFF',
"border-width": "2px",
"border-opacity": "0.5",
"border-color": "#CCCCCC",
"text-valign": "center",
"text-halign": "center",
"text-outline-color": "#CCCCCC",
"text-outline-width": "1px",
}
}, {
selector: 'edge',
style: {
'width': 3,
'line-color': '#ccc',
'color': '#ccc',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle'
}
},
{
selector: 'node[tf="NA"]',
style: {
'width': 3,
'shape': 'rectangle',
'background-color': '#000',
'line-color': '#009999',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle'
}
}
],
layout: {
name: 'cola',
//edgeLength: function(edge){return edge.data('range')} !!!!! I don't know how to pass parameter
}
});
}
});
</script>
</body>
</html>
As you can see , I want to pass edges.data.range to edgeLength. But I didn't success. Hope somebody can help me. Thanks in advance!
The edgeLength function requires a number or a function that returns some sort of number. Passing something like 10.4px won't work, the layout can't read pixel values (or rather strings). Just use the function like this:
{
"nodes": [{
"data": {
"id": "a",
"label": "TF",
"size": 50,
"tf": "bZIP"
}
},
{
"data": {
"id": "b",
"label": "Gene2",
"size": 5.45,
"tf": "bZIP"
}
},
{
"data": {
"id": "c",
"label": "Gene3",
"size": 9.3,
"tf": "WRKY"
}
},
{
"data": {
"id": "d",
"label": "Gene4",
"size": 1.17,
"tf": "MYB"
}
},
{
"data": {
"id": "e",
"label": "Gene5",
"size": 4.84,
"tf": "NAC"
}
},
{
"data": {
"id": "f",
"label": "Gene6",
"size": 1.49,
"tf": "NA"
}
}
],
"edges": [{
"data": {
"id": "ab",
"source": "a",
"target": "b",
"range": 3.4
}
},
{
"data": {
"id": "ac",
"source": "a",
"target": "c",
"range": 38.6
}
},
{
"data": {
"id": "ad",
"source": "a",
"target": "d",
"range": 20.6
}
},
{
"data": {
"id": "ae",
"source": "a",
"target": "e",
"range": 14.9
}
},
{
"data": {
"id": "af",
"source": "a",
"target": "f",
"range": 47.8
}
}
]
}
...
edgeLength: function (edge) {
return edge.data('range');
}