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

仅在外部节点上运行圆形布局，根据需要指定半径，并以中心节点为中心的边界框。在init之后，在其他节点上运行您喜欢的任何布局，因此您可以使用初始位置来建立辅助布局。

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

Cytoscape.js - 圆形布局

1 个答案: