After diligently going through the official documentation and following the steps in the tutorial, I have successfully managed to access a node's data field and use it for labeling, as long as the key is a simple string.
However, my data will contain fields with colons in their keys (as can be seen in the code snippet below). How can I adjust my approach to accommodate these keys and expect 'aa' and 'bb' as node labels?
I have tried various approaches such as using single or double quotes, bracket notation, etc., but none of them seem to work. Any suggestions on how to make this example function properly?
<html>
<head>
<title>Test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.21.2/cytoscape.min.js"></script>
</head>
<style>
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<body>
<div id="cy"></div>
<script>
var cy = cytoscape({
container: document.getElementById("cy"),
elements: [
{ data: { "id": "a", "skos:prefLabel": "aa" } },
{ data: { "id": "b", "skos:prefLabel": "bb" } },
{ data: {
id: "ab",
source: "a",
target: "b",
},
},
],
style: [
{
selector: "node",
style: {
"shape": "square",
"background-color": "red",
"label": "data(skos:prefLabel)" /* What do I put here? I know that replacing this
with "data(id)" works for the id field, but I
need it to work for the skos:prefLabel field,
expecting 'aa' and 'bb' */
},
},
],
});
console.log(cy._private.elements[1]._private.data["skos:prefLabel"]); /* I can see the data
is there and I
can access it
using standard
javascript. */
</script>
</body>
</html>