Реагировать 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()
      })   
    }}
/>