javascript - React Cytoscape JS：所有节点都累积在一个位置

Question

使用 dagre 创建路径时，整个节点会累积在一个位置。我们如何为节点设置默认位置（没有反应的 Cytoscape js 工作正常）而不是使用节点的位置属性单独设置位置。

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>
);

预期结果：

当前结果：

Answer 1

有一种方法可以在添加节点位置时强制计算它们。当图的元素随着组件的状态而动态变化并且必须使用更新的节点位置再次渲染图时，这也很有用。

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

Answer 2

您可以尝试“Euler”布局而不是“Dagre”布局

Answer 3

这对我有用：

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