how to load and apply json vizmap (exported from Cy3) to cytoscape.js? - cytoscape.js

Question

For loading the Cy3-exported network, this works great:
cy.add(network.elements); // where 'network' is the json object exported by Cy3
What command loads and applies the exported vizmap? This command ran to completion, but the visual style of the network bears no resemblance to what we see in Cy3.
cy.style().fromJson(vizmap).update() // where 'vizmap' is the json vizmap object from Cy3
Advice, anyone? Perhaps even a small example?
Thanks!
Paul

Answer 1

Rather than loading this data after init, have you tried using the init options instead. That's where style is specified.
cytoscape({
style: networkJson.path.to.style,
elements: networkJson.path.to.elements
// ...
});
Edit: It looks like Cytoscape-desktop generates JSON like this
[ {
"title" : "hallmarksOfCancer",
"style" : [ {
"selector" : "node",
"css" : {
"text-opacity" : 1.0,
"width" : 70.0,
"border-opacity" : 1.0,
"background-color" : "rgb(255,255,255)",
"background-opacity" : 1.0,
"font-size" : 20,
"shape" : "ellipse",
"border-width" : 1.0,
"border-color" : "rgb(0,0,0)",
"color" : "rgb(0,0,0)",
"height" : 30.0,
"text-valign" : "center",
"text-halign" : "center",
"font-family" : "SansSerif",
"font-weight" : "bold",
"content" : "data(label)"
}
}, {
"selector" : "node[score > 4.6]",
"css" : {
"width" : 140.0
}
}, {
"selector" : "node[score = 4.6]",
"css" : {
"width" : 140.0
}
}, {
"selector" : "node[score > 0.0][score < 4.6]",
"css" : {
"width" : "mapData(score,0.0,4.6,70.0,140.0)"
}
}, {
In that case, you can use something like style: visjson[i].style in your init options, where i ranges on 0 <= i <= visjson.length. Cytoscape desktop exports several stylesheets at once, so you 'll need to specify which one (i.e. i) you want to use.