如何使 cose 图不卡入到位？

Question

我正在使用具有 cose 布局的 Cytoscape JS 创建网络图。我运行遇到的问题是，当我为我的图表制作动画时，它会缓缓进入其结束位置，然后快速进入不同的位置。

我试过转动 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 速度快，文件小，但功能较少。

如何使 cose 图不卡入到位？

How do I make cose graph not snap into place?

cytoscape.js