Using Cytoscape.js how do I access a data field that has a colon in its key?
Question
Having followed the official documentation and tutorial , I am able to -- as long as the key is a simple string -- access a node's data field and use it for a node label.
However, my data will have fields with a colon in its keys (see code snippet for an example). How can I make this example work, expecting to see 'aa' and 'bb' as node labels?
I know that "data(id)" for the style label attribute works for the id field and tried several alterations using single/double quotes, single/doubles quotes around the key, bracket notation, etc., but that all didn't help.
<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>
1 answers
solution1
0 ACCPTED 2022-07-06 14:31:08
I was able to solve my own problem, inspired by an answer to this question .
Using a function, I was able to access the field with a colon in its key:
// compare with code above
style: [
{
selector: "node",
style: {
"shape": "square",
"background-color": "red",
"label": (element) => element.data("skos:prefLabel"), /* this resulted
in showing 'aa'
and 'bb' as node
labels. /*
},
See also working codepen here .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.