4

dagre を使用してパスを作成すると、ノード全体が 1 つの位置に蓄積されます。ノードの位置属性を使用して個別に位置を設定する代わりに、ノードのデフォルト位置を設定するにはどうすればよいですか (React のない 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>
);

期待される結果： 期待される結果

現在の結果: 現在の結果

4

3 に答える 3

1

追加されたノード位置の計算を強制する方法があります。これは、コンポーネントの状態に応じてグラフの要素が動的に変化し、更新されたノード位置でグラフを再度レンダリングする必要がある場合にも役立ちます。

<CytoscapeComponent
    cy={(cy) => {
      this.cy = cy
      cy.on('add', 'node', _evt => {
      cy.layout(this.state.layout).run()
      cy.fit()
      })   
    }}
/>
于 2020-03-30T19:50:29.410 に答える
0

これが私のために働いたものです：

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' }}
   />
于 2021-06-16T03:38:23.490 に答える