Cytoscape.js-圓形布局

Question

我正在嘗試使用Cytoscape.js制作此http://gcuculi.com/cda/imagens/grafico.png 。 我正在使用圓形布局，但無法正常工作。 我將動態添加更多項目。 第一個節點總是比第二個節點更近，以此類推。

這是代碼：

$(function(){ 
  var cy = cytoscape({
  container: document.getElementById('grafico-constelacao'),

  style: cytoscape.stylesheet()
   .selector('node')
     .css({
       'content': 'data(name)',
       'text-valign' : 'center',
       'color' : 'white',
      })
   .selector('edge')
     .css({
       'width': 2,
       'line-color': '#000'
     })
    .selector('#p')
      .css({
        'background-color': '#fff',
        'width': '60px',
        'height': '60px',
        'border-width': '2px',
        'border-style': 'solid',
        'border-color ': '#888',
      }),

  elements: {

    nodes: [
      {
        data: {id: 'p', weight: 1 },
        group: 'nodes',
        position: {
          x: 500,
          y: 150
        },
        classes: 'principal',
        selected: false,
        selectable: false,
        locked: true,
        grabbable: false
      },
      { data: { id: 'atr1', name : 'A'} },
      { data: { id: 'atr2', name : 'B' } },
      { data: { id: 'atr3', name : 'C' } },
      { data: { id: 'atr4', name : 'D' } },
      { data: { id: 'atr5', name : 'E' } }   
    ], 

    edges: [
      { data: { id: 'p-atr1', weight: 1, source: 'p', target: 'atr1' } },
      { data: { id: 'p-atr2', weight: 10, source: 'p', target: 'atr2' } },
      { data: { id: 'p-atr3', weight: 50, source: 'p', target: 'atr3' } },
      { data: { id: 'p-atr4', weight: 100, source: 'p', target: 'atr4' } },
      { data: { id: 'p-atr5', weight: 250, source: 'p', target: 'atr5' } }
    ]
  },

  layout: {
    name: 'circle',

    fit: true,
    padding: 30, 
    boundingBox: undefined,
    avoidOverlap: true,
    radius: undefined,
    startAngle: 10 * Math.PI,
    counterclockwise: true,
    sort: undefined,
    animate: false,
    animationDuration: 500,
    ready: undefined,
    stop: undefined
  },


  // interaction options:
  zoomingEnabled: false,
  userZoomingEnabled: false,
  panningEnabled: false,
  userPanningEnabled: false,
  boxSelectionEnabled: false,
  selectionType: 'single',
  touchTapThreshold: 8,
  desktopTapThreshold: 4,
  autolock: false,
  autoungrabify: false,
  autounselectify: false,
});
});

有一種方法可以控制強制值的邊的大小？

Answer 1

僅在外部節點上運行圓形布局，指定所需的半徑，並以中心節點為中心確定邊界框。 在初始化之后，可以在其他節點上運行所需的任何布局，因此您具有初始位置，可將輔助布局作為基礎。

http://js.cytoscape.org/#collection/layout