如何使cose图不捕捉到适当的位置？

Question

我正在使用Cytoscape JS创建一个带有cose布局的网络图。我遇到的问题是，当我为我的图形设置动画时，它会缓缓到其结束位置，然后它会捕捉到不同的位置。

我已经尝试了fit的转向，定义了boundingBox，增加和减少了minTemp以及增加了coolingFactor。

以下是布局变量的定义：

export default {
  name: 'cose',

  // Called on `layoutready`
  ready: function(){},

  // Called on `layoutstop`
  stop: function(){},

  // Whether to animate while running the layout
  // true : Animate continuously as the layout is running
  // false : Just show the end result
  // 'end' : Animate with the end result, from the initial positions to the end positions
  animate: 'end',

  // Easing of the animation for animate:'end'
  // Options: 'ease', 'linear'(default if undefined), ... potentially more options but need to find them
  animationEasing: 'ease',

  // The duration of the animation for animate:'end'
  animationDuration: 3000,

  // A function that determines whether the node should be animated
  // All nodes animated by default on animate enabled
  // Non-animated nodes are positioned immediately when the layout starts
  animateFilter: function ( node, i ){ return true; },


  // The layout animates only after this many milliseconds for animate:true
  // (prevents flashing on fast runs)
  animationThreshold: 1000,

  // Number of iterations between consecutive screen positions update
  refresh: 10,

  // Whether to fit the network view after when done
  fit: true,

  // Padding on fit
  padding: 20,

  // Constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
  boundingBox: undefined,

  // Excludes the label when calculating node bounding boxes for the layout algorithm
  nodeDimensionsIncludeLabels: true,

  // Randomize the initial positions of the nodes (true) or use existing positions (false)
  randomize: true,

  // Extra spacing between components in non-compound graphs
  componentSpacing: 10,

  // Node repulsion (non overlapping) multiplier
  nodeRepulsion: function( node ){ return 1000000000; },

  // Node repulsion (overlapping) multiplier
  // NOTE: effects spacing of nodes
  nodeOverlap: 100000000,

  // Ideal edge (non nested) length
  idealEdgeLength: function( edge ){ return 50; },

  // Divisor to compute edge forces
  edgeElasticity: function( edge ){ return 1; },

  // Nesting factor (multiplier) to compute ideal edge length for nested edges
  nestingFactor: 0.1,

  // Gravity force (constant)
  gravity: -1000,

  // Maximum number of iterations to perform
  numIter: 20000,

  // Initial temperature (maximum node displacement)
  initialTemp: 100,

  // Cooling factor (how the temperature is reduced between consecutive iterations
  coolingFactor: 0.999,

  // Lower temperature threshold (below this point the layout will end)
  minTemp: 10.0,
};

Answer 1

如果你想要一个更复杂的力导向布局，你应该使用COSE Bilkent或fCOSE。捆绑的COSE文件大小小，速度快，但其功能较少。