javascript - react Cytoscape JS : All nodes are accumulated in one position

Question

使用 dagre 创建路径时，所有节点都会聚集在一个位置。我们如何设置节点的默认位置(没有React的Cytoscape js也可以正常工作)，而不是使用节点的position属性单独设置位置。

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