cytoscape.js node unwanted overlap and unexpected styling
I've got a working cytoscape.js instance that looks like this:
I have been trying unsuccessfully to configure the graph so that the node labels don't overlap. The graph uses arbor for layout. Playing with the repulsion levels doesn't have much effect on the problem. Gravity (or lack thereof) doesn't either. Is this a layout issue or a cytoscape.js config issue and how do I fix it?
Secondarily, node shape is supposed to be a 40x40 ellipse, which it generally is. But when a node is grabbed, it displays as a rounded rectangle. Why?
I've created a gist with my javascript and some data. It's dependent on jQuery (~2.1), cytoscape.js (>=2.3.9) and arbor.js as provided in the cytoscape.js lib directory. And it needs <div id="cy"></div> for a target.
(1) Overlap is a function of layout. If changing layout parameters is unsuccessful for your usecase, a different layout is probably the solution.
(2) That's the overlay -- not the node's body.
- On a Cytoscape.js graph, how to get the coordinates of the edge's terminal nodes by clicking it
- How to remove specific edges without redrawing the graph using cytoscape.js?
- How to tell a React/Next.js page that Dark Mode was Toggled?
- Call an app in a loop with different parameters in Cytoscape
- how can I create a key in cytoscape?
- How to delete the parent node without deleting the children nodes
- Remove/hide compound node without removing/hiding descendants
- Modify specific edge properties using cytoscape.js (Substantially edited on 2-15-24)
- Where is the documentation for setting a Cytoscape node label width to the width of the label text?
- Target Arrow Opacity
- How to add nodes of different shapes in react-cytoscape?
- Show/Hide labels on elements in the graph on button click
- Cytoscape.js Getting IDs For All Nodes Selected
- cytoscape.js only get targets from node.outgoers()
- Is it possible to store Cytoscape.js layout data directly to a file format in app/web server and re-launch the same layout to minimize re-computation?
- Integrating CytoscapeJs with LeafletJs
- Adding image as a label on edge in cytoscape.js
- Cytoscape JS - Create a node by drag and drop from outside palette
- How to add cytoscape extensions in Angular
- Make the curvy edge into a straight edge in cytoscape.js
- Problem with automatically-generated SVG display using Cytoscape.js
- How to keep the previous position when expand and collapse group with cytoscape.js
- collapsing/expanding compound node in cytoscape
- Cytoscape.js: calculate graph dimensions at current zoom level?
- cytoscape save graph as image by button
- is there a cytoscape.js property change listener?
- Adjust the zoom scale in Cytoscape.js trigered by the mouse wheel
- How to make the "breadthfirst" layout more compact
- Creating a network in Cytoscape
- Dash Cytoscape data from js script