I'm building a web application using Cytoscape.js that visualizes protein interaction data.
Proteins (nodes) need to have ID's corresponding to strings representing their chromosome locations, because this is universal. However, I would like them to be visualized or displayed alongside their common names, and not their ID's.
Any idea how to do this? The Cytoscape documentation doesn't seem to have an answer.
You can specify the nodes name in the data field. If you want to diplay that name as the nodes label, just use the field label: "data(name)":
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
boxSelectionEnabled: false,
autounselectify: true,
style: [{
selector: "node",
css: {
label: "data(name)", //access the nodes data with "data(...)"
// label: "data(id)",
"text-valign": "center",
"text-halign": "center",
height: "60px",
width: "100px",
shape: "rectangle",
"background-color": "data(faveColor)"
}
},
{
selector: "edge",
css: {
"curve-style": "bezier",
"control-point-step-size": 40,
"target-arrow-shape": "triangle"
}
}
],
elements: {
nodes: [{
data: {
id: "Top",
faveColor: "#2763c4",
name: "Steve"
}
},
{
data: {
id: "yes",
faveColor: "#37a32d",
name: "Larry"
}
},
{
data: {
id: "no",
faveColor: "#2763c4",
name: "Kiwi"
}
},
{
data: {
id: "Third",
faveColor: "#2763c4",
name: "Alex"
}
},
{
data: {
id: "Fourth",
faveColor: "#56a9f7",
name: "Vader"
}
}
],
edges: [{
data: {
source: "Top",
target: "yes"
}
},
{
data: {
source: "Top",
target: "no"
}
},
{
data: {
source: "no",
target: "Third"
}
},
{
data: {
source: "Third",
target: "Fourth"
}
},
{
data: {
source: "Fourth",
target: "Third"
}
}
]
},
layout: {
name: "dagre"
}
}));body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
left: 0;
top: 0;
float: left;
position: absolute;
}<html>
<head>
<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">
<script src="https://unpkg.com/[email protected]/dist/cytoscape.min.js">
</script>
<!-- cyposcape dagre -->
<script src="https://unpkg.com/[email protected]/dist/dagre.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>You can find this in the documents as well:
© 2022 - 2024 — McMap. All rights reserved.