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

【问题标题】：React Cytoscape JS : All nodes are accumulated in one positionReact Cytoscape JS：所有节点都累积在一个位置
【发布时间】：2020-06-12 05:04:18
【问题描述】：

当使用 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>
);

预期结果：

当前结果：

【问题讨论】：

标签： javascript reactjs cytoscape.js cytoscape-web dagre

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

也许您可以详细说明为什么会有所帮助
“欧拉”布局有更多的参数，你可以增加你的长度以及排斥力来获得效果。
谢谢；我建议您编辑答案并进一步改进答案本身:) 祝你好运，欢迎来到 SO :)
请参考github.com/cytoscape/cytoscape.js-euler 这些参数将有所帮助： // - 这作为边缘长度的提示 // - 如果力设置为极端值，边缘长度可以更长或更短(1) springLength: edge => 80, // 库仑定律系数 // - 负值时使节点相互排斥 // - 正值时使节点相互吸引 (2) Gravity: -1.2, // A将节点拉向原点的力 (0, 0) // 较高的值使组件分布较少 (3) pull: 0.001,
我的意思是积极鼓励编辑您的帖子并添加此信息；因为这些 cmets 仅供讨论 :) （或者您无法编辑自己的 cmets？）

【解决方案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' }}
   />

【讨论】：