cytoscape.js

I want to add a cytoscape node at the location of mouse arrow, on a click event on the canvas. How can I do this? My approach : (not working so well) I am able to create a node on a click but I am not able to make sure the position of the created node is at the place where I have clicked. Using something like this: $("#cy").click(function(event){ pos = getMousePosition(this, event) cy.add([ { group: "nodes", data: { id: "testid" }, position: pos }, ]); }); I have not been able to define getMousePosition() correctly. How should I define this function to get the node rendered at the right

I'm having trouble building a graph network with cytoscapeJS. I can add nodes and handle them which is quite easy, but I'm not able to configure cytospace to disable Dragging/Moving nodes. I have found a JSbin from somebody where you can try: http://jsbin.com/vasenatimu/2/edit?html,js,output Have a look at http://js.cytoscape.org under 'Initialisation options', I tried all the options, but they dont solve my problem (I set nearly all options to false and I can still grab and select nodes). Can you help me with this? initOptions.autoungrabify: true or cy.nodes().ungrabify() You can also disable

I have 2 Bootstrap columns (each width is 6 out of 12), the one on the left has some buttons, the one on the right contains a Cytoscape graph initialized with 5 nodes. Initially, when the page loading finished, the Cytoscape graph is set to be hidden. $('.cyto_div').hide(); My intention is that when the "Show" button is clicked, the Cytoscape graph should appear. $('.cyto_div').show(); However, only the panel covering the Cytoscape graph appears, the graph itself doesn't appear. When I resize the browser, then the Cytograph with 5 nodes appear. I suspect somewthing to do with cy.resize(), but

Context I want to use cytoscape.js for visualizing graphs. While I am capable with a myriad of languages ( C++ , Mathematica , R , etc), I am new to Javascript , JSON , HTML , and CSS . Thus it would be favorable to learn these languages through this use case (implementing graphs with cytoscape.js ). Please keep this in mind in your answer. I have previously asked how to [remotely load cytoscape.js and how to get graphs display (requires a div ) . Since then I have created a script that turns a graph as represented in one of the other languages I use, into the JSON format indicated here .

I want to lock the position of a node relative to its parent compound node, such that if I grab and drag the parent node, the child node moves with it, but the child is not individually grabbable. If I set the child to be ungrabbable and/or locked, then it doesn't move with its parent, but if I don't, it can be individually dragged, which I don't want. Can this be done? Failing that, is there a way to programmatically grab/ungrab a node so that I can listen for a grab event and then grab the parent instead/as well? Compound grabbing/locking logic with children probably needs to be improved in