Search code examples
csscytoscape.jscytoscape

Cystoscape - node and spoke model - need bounciness and movement


I have a visualization of node and spoke model and tried cytoscape. Loving how easy it is to implement and able to control the size of the node, color of the node, placement of text etc. On load, the viz eases out and appears. Sort of like https://ivis-at-bilkent.github.io/cytoscape.js-fcose/demo.html.

However once it is loaded, it looks very static.

I do not want to go to d3 / amcharts just for this reason. Is there anyway I can float nodes around or something using cytoscape options or even css like codepen.io/team/amcharts/pen/EJgNey


Solution

  • Use Cola. Refer to the demo: https://js.cytoscape.org/demos/colajs-graph/

    Cola can be used iteratively, as in the demo with the slider: The slider restarts the layout with the updated state -- here the slider controls the forces. You can just restart the layout whenever a node is dragged.