CODEWITHSUNDEEP
javascriptreactjscytoscape.jscytoscape-webdagre
Sobhin Chandran
Sobhin Chandran

Reputation: 41

React Cytoscape JS : All nodes are accumulated in one position

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

Upvotes: 4

Views: 2203

Answers (3)

Steven McConnon
Steven McConnon

Reputation: 2680

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' }}
   />

Upvotes: 1

LCK
LCK

Reputation: 137

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

Upvotes: 0

Anjul Tyagi
Anjul Tyagi

Reputation: 478

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()
      })   
    }}
/>

Upvotes: 2

Related Questions