4

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

Stephan T.
  • 5,843
  • 3
  • 20
  • 42
Sobhin Chandran
  • 41
  • 2

3 Answers3

1

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()
      })   
    }}
/>
Anjul Tyagi
  • 410
  • 3
  • 11
1

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' }}
   />
Steven McConnon
  • 2,650
  • 2
  • 16
  • 21
0

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

LCK
  • 137
  • 1
  • 11
  • perhaps you could elaborate on why that helps – murb Mar 18 '21 at 10:10
  • "Euler" layout has more parameter where you can increase your length as well as repulsive force to get the effect. – LCK Mar 18 '21 at 10:15
  • Thanks; I'd recommend you to edit the answer and improve the answer itself a bit more :) Good luck & welcome to SO :) – murb Mar 18 '21 at 10:21
  • Please refer to https://github.com/cytoscape/cytoscape.js-euler These parameters will help: // - This acts as a hint for the edge length // - The edge length can be longer or shorter if the forces are set to extreme values (1) springLength: edge => 80, // Coulomb's law coefficient // - Makes the nodes repel each other for negative values // - Makes the nodes attract each other for positive values (2) gravity: -1.2, // A force that pulls nodes towards the origin (0, 0) // Higher values keep the components less spread out (3) pull: 0.001, – LCK Mar 19 '21 at 06:34
  • I meant it as a positive encouragement to edit your post and add this information; as these comments are just for discussion :) (or are you unable to edit your own comments?) – murb Mar 19 '21 at 20:35