[Question] setting elements property via setState causes graph nodes to stack on top of each other about react-cytoscapejs HOT 5 CLOSED

I was having a similar issue. Per the Cytoscape Documentation, the new layout needs to be created and run when the elements have been updated. Not sure this is exposed through the React side of things, but it is easy to get the original Cytoscape object. So in my component code I have something like:

componentWillUpdate = () => {
    if(this.cy) {
      var layout = this.cy.layout({name: 'cose-bilkent'})
      layout.run();
    }
  }

And the element looks like this:

<CytoscapeComponent 
          elements={this.state.elements} 
          style={{ width: '100vw', height: '85vh', backgroundColor: 'rgb(250, 250, 250)' }}
          layout={{name: 'cose-bilkent'}}
          cy={(cy:any) => (this.cy = cy)}
 />

That seems to work.

from react-cytoscapejs.

You have no positions defined on the nodes so they default to (0,0)

from react-cytoscapejs.

Thank you - it is resolved.

from react-cytoscapejs.

You have no positions defined on the nodes so they default to (0,0)

The actual cytoscape supports without even passing position. Isnt that supported in the react version?

from react-cytoscapejs.

You have no positions defined on the nodes so they default to (0,0)

The actual cytoscape supports without even passing position. Isnt that supported in the react version?

I am currently having the same issue. So far I've been using only the cytoscape.js library and it has worked great. I haven't had to define position on the nodes for the graph to work correctly.

What I don't understand is why we don't have to define positions for the nodes when we are not fetching the data but when we do we have to define them.

This project is working perfectly without fetching data but as soon as I try to make something similar but fetching the data from an API and then doing the mapping myself, the whole Cytoscape Graph becomes messy.

from react-cytoscapejs.