React Cytoscape JS : All nodes are accumulated in one position

user_7402945 0
Viewed 1330

When creating a path using dagre, the whole nodes accumulate in one position. How can we set default positions for nodes ( Cytoscape js without react works fine) instead of setting position separately using position attribute for nodes.

const layout = {
  name: "dagre",
  rankDir: "LR"
}
pageData = < CytoscapeComponent
elements = {
  CytoscapeComponent.normalizeElements({
    nodes: nodess,
    edges: edgess,
    layout: layout,
  })
}
pan = {
  {
    x: 200,
    y: 200
  }
}
autounselectify = {
  true
}
userZoomingEnabled = {
  false
}
boxSelectionEnabled = {
  false
}
style = {
  {
    width: "1200px",
    height: "1000px"
  }
}
/>
return (
  < div

  {
    pageData
  }
  < /div>
);

Expected result: Expected Result

Current result: Current Result

dagre cytoscape-web cytoscape.js reactjs javascript
3 Answers

There is a way to force the calculation of node positions as they are added. This is also useful when the elements of the graph change dynamically with the state of the component and the graph has to be rendered again with updated node positions. 

<CytoscapeComponent
    cy={(cy) => {
      this.cy = cy
      cy.on('add', 'node', _evt => {
      cy.layout(this.state.layout).run()
      cy.fit()
      })   
    }}
/>
user_46844590

You may try "Euler" layout instead of "Dagre" layout

user_153531510

Here is what worked for me:

cytoscape.use(fcose)

//..then in my render...
<CytoscapeComponent
   elements={elements1}
   layout={{
     animate: true,
     animationDuration: undefined,
     animationEasing: undefined,
     boundingBox: undefined,
     componentSpacing: 40,
     coolingFactor: 0.99,
     fit: true,
     gravity: 1,
     initialTemp: 1000,
     minTemp: 1.0,
     name: 'fcose',
     nestingFactor: 1.2,
     nodeDimensionsIncludeLabels: false,
     nodeOverlap: 4,
     numIter: 1000,
     padding: 30,
     position(node) {
         return { row: node.data('row'), col: node.data('col') }
     },
     randomize: true,
     refresh: 20,
   }}
   style={{ width: '600px', height: '300px' }}
   />
user_12681680
Related